@micromag/screen-keypad 0.3.651 → 0.3.657

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-keypad-close,.micromag-screen-keypad-popup,.micromag-screen-keypad-popupButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-keypad-background,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-keypad-disabled.micromag-screen-keypad-container{overflow:hidden;pointer-events:none}.micromag-screen-keypad-hidden.micromag-screen-keypad-container{display:none;visibility:hidden}.micromag-screen-keypad-placeholder.micromag-screen-keypad-container .micromag-screen-keypad-content{padding:6px;position:relative}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-keypad-close:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{font-weight:inherit;margin-bottom:inherit;margin-top:inherit}.micromag-screen-keypad-container.micromag-screen-keypad-isPlaceholder .micromag-screen-keypad-layout{padding:10px}.micromag-screen-keypad-background{z-index:1}.micromag-screen-keypad-fixedHeader{display:-ms-flexbox;display:flex;left:0;position:absolute;right:0;top:0;z-index:50;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end;opacity:0;padding:10px;pointer-events:none;width:100%}.micromag-screen-keypad-fixedHeader.micromag-screen-keypad-open{opacity:1;pointer-events:auto}.micromag-screen-keypad-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-filter:invert(100%);filter:invert(100%);font-weight:700;margin-left:auto}.micromag-screen-keypad-close:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff}.micromag-screen-keypad-closeIcon{border-radius:50%;color:#000;height:25px;padding:0;width:25px}.micromag-screen-keypad-header{left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-footer{bottom:0;left:0;position:absolute;width:100%}.micromag-screen-keypad-inner{height:100%;position:relative;z-index:2}.micromag-screen-keypad-layout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;height:100%;justify-content:flex-start;text-align:center;-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:10px auto;width:100%}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:85%}.micromag-screen-keypad-item{height:100%;position:relative}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-item{height:0;padding-bottom:100%}.micromag-screen-keypad-placeholderItem{height:0;padding-bottom:60%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-placeholderItem{padding-bottom:100%}.micromag-screen-keypad-button{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;font-weight:inherit;height:100%;justify-content:center;overflow:hidden;padding:0;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%}.micromag-screen-keypad-button:focus-visible,.micromag-screen-keypad-button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-keypad-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{padding:2px;pointer-events:none}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:active,.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink{-webkit-text-decoration:none;text-decoration:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink:hover{color:inherit}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{margin:0;width:100%}.micromag-screen-keypad-buttonVisualPlaceholder{width:100%}.micromag-screen-keypad-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-keypad-buttonLabel{padding:5px;width:100%}.micromag-screen-keypad-empty{margin-bottom:10px;padding:10px;width:100%}.micromag-screen-keypad-emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.micromag-screen-keypad-emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.micromag-screen-keypad-popupBackdrop{-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(0,0,0,.2);pointer-events:none;z-index:2}.micromag-screen-keypad-popup{height:100%;position:fixed;right:0;top:0;-ms-touch-action:none;touch-action:none;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%;z-index:6}.micromag-screen-keypad-popup:active,.micromag-screen-keypad-popup:hover{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupButton{height:100%;position:relative;text-align:left;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%;z-index:3}.micromag-screen-keypad-popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupScroll{height:100%;width:100%}.micromag-screen-keypad-popupInner{background-color:#1c1c1c;-webkit-box-shadow:0 0 2px #1c1c1c;box-shadow:0 0 2px #1c1c1c;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:10% 7.5%;overflow:hidden;position:relative;z-index:40}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent p{font-weight:inherit;margin-bottom:0;margin-top:0}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;margin-bottom:.5em;width:100%}.micromag-screen-keypad-popupHeading{font-weight:inherit;margin-bottom:.25em}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.micromag-screen-keypad-popupCTA{margin:0 auto;z-index:2}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonLabel{-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonLabel{display:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonVisual{height:100%;width:100%!important}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{max-height:none;-o-object-fit:cover;object-fit:cover;width:100%!important}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual{z-index:1}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75));bottom:0;display:block;height:auto;top:auto;z-index:2}
+.micromag-screen-keypad-close,.micromag-screen-keypad-popup,.micromag-screen-keypad-popupButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-keypad-background,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-keypad-disabled.micromag-screen-keypad-container{overflow:hidden;pointer-events:none}.micromag-screen-keypad-hidden.micromag-screen-keypad-container{display:none;visibility:hidden}.micromag-screen-keypad-placeholder.micromag-screen-keypad-container .micromag-screen-keypad-content{padding:6px;position:relative}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-keypad-close:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{font-weight:inherit;margin-bottom:inherit;margin-top:inherit}.micromag-screen-keypad-container.micromag-screen-keypad-isPlaceholder .micromag-screen-keypad-layout{padding:10px}.micromag-screen-keypad-background{z-index:1}.micromag-screen-keypad-fixedHeader{display:-ms-flexbox;display:flex;left:0;position:absolute;right:0;top:0;z-index:50;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end;opacity:0;padding:10px;pointer-events:none;width:100%}.micromag-screen-keypad-fixedHeader.micromag-screen-keypad-open{opacity:1;pointer-events:auto}.micromag-screen-keypad-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-filter:invert(100%);filter:invert(100%);font-weight:700;margin-left:auto}.micromag-screen-keypad-close:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff}.micromag-screen-keypad-closeIcon{border-radius:50%;color:#000;height:25px;padding:0;width:25px}.micromag-screen-keypad-header{left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-footer{bottom:0;left:0;position:absolute;width:100%}.micromag-screen-keypad-inner{height:100%;position:relative;z-index:2}.micromag-screen-keypad-layout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;height:100%;justify-content:flex-start;text-align:center;-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:10px auto;width:100%}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:85%}.micromag-screen-keypad-item{height:100%;position:relative}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-item{height:0;padding-bottom:100%}.micromag-screen-keypad-placeholderItem{height:0;padding-bottom:60%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-placeholderItem{padding-bottom:100%}.micromag-screen-keypad-button{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;font-weight:inherit;height:100%;justify-content:center;overflow:hidden;padding:0;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%}.micromag-screen-keypad-button:focus-visible,.micromag-screen-keypad-button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-keypad-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{padding:2px;pointer-events:none}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:active,.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink{-webkit-text-decoration:none;text-decoration:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink:hover{color:inherit}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{margin:0;width:100%}.micromag-screen-keypad-buttonVisualPlaceholder{width:100%}.micromag-screen-keypad-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-keypad-buttonLabel{padding:5px;width:100%}.micromag-screen-keypad-empty{margin-bottom:10px;padding:10px;width:100%}.micromag-screen-keypad-emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.micromag-screen-keypad-emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.micromag-screen-keypad-popupBackdrop{-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(0,0,0,.2);pointer-events:none;z-index:2}.micromag-screen-keypad-popup{height:100%;position:fixed;right:0;top:0;-ms-touch-action:none;touch-action:none;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%;z-index:6}.micromag-screen-keypad-popup:active,.micromag-screen-keypad-popup:hover{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupButton{height:100%;position:relative;text-align:left;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%;z-index:3}.micromag-screen-keypad-popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupScroll{height:100%;width:100%}.micromag-screen-keypad-popupInner{background-color:#1c1c1c;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:10% 7.5%;overflow:hidden;position:relative;z-index:40}.micromag-screen-keypad-popupInner.micromag-screen-keypad-withShadow{-webkit-box-shadow:0 0 2px #1c1c1c;box-shadow:0 0 2px #1c1c1c}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent p{font-weight:inherit;margin-bottom:0;margin-top:0}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;margin-bottom:.5em;width:100%}.micromag-screen-keypad-popupHeading{font-weight:inherit;margin-bottom:.25em}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.micromag-screen-keypad-popupCTA{margin:0 auto;z-index:2}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonLabel{-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonLabel{display:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonVisual{height:100%;width:100%!important}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{max-height:100px;-o-object-fit:cover;object-fit:cover;width:100%!important;width:100%}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual{z-index:1}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75));bottom:0;display:block;height:auto;top:auto;z-index:2}.micromag-screen-keypad-fillImage .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-fillImage .micromag-screen-keypad-emptyButtonVisual{height:100%;width:100%!important}.micromag-screen-keypad-fillImage .micromag-screen-keypad-thumbnail{-o-object-fit:cover;object-fit:cover;width:100%!important;width:100%}

package/es/index.js

@@ -10,7 +10,7 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { ScreenElement, PlaceholderButton, Close } from '@micromag/core/components';
 import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver, useDragProgress } from '@micromag/core/hooks';
-import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, camelCase, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
+import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, camelCase, getStyleFromBox, getStyleFromText, getStyleFromAlignment } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import Button from '@micromag/element-button';
 import CallToAction from '@micromag/element-call-to-action';
@@ -24,7 +24,7 @@ import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 
-var styles = {"popupButton":"micromag-screen-keypad-popupButton","popup":"micromag-screen-keypad-popup","close":"micromag-screen-keypad-close","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","buttonLabel":"micromag-screen-keypad-buttonLabel","withSquareItems":"micromag-screen-keypad-withSquareItems","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","thumbnail":"micromag-screen-keypad-thumbnail","popupBackdrop":"micromag-screen-keypad-popupBackdrop","button":"micromag-screen-keypad-button","background":"micromag-screen-keypad-background","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","fixedHeader":"micromag-screen-keypad-fixedHeader","open":"micromag-screen-keypad-open","closeIcon":"micromag-screen-keypad-closeIcon","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","inner":"micromag-screen-keypad-inner","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","disableHover":"micromag-screen-keypad-disableHover","isLink":"micromag-screen-keypad-isLink","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popupScroll":"micromag-screen-keypad-popupScroll","popupInner":"micromag-screen-keypad-popupInner","popupContent":"micromag-screen-keypad-popupContent","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","emptyCTA":"micromag-screen-keypad-emptyCTA","popupCTA":"micromag-screen-keypad-popupCTA","contentBottom":"micromag-screen-keypad-contentBottom","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual"};
+var styles = {"popupButton":"micromag-screen-keypad-popupButton","popup":"micromag-screen-keypad-popup","close":"micromag-screen-keypad-close","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","buttonLabel":"micromag-screen-keypad-buttonLabel","withSquareItems":"micromag-screen-keypad-withSquareItems","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","thumbnail":"micromag-screen-keypad-thumbnail","popupBackdrop":"micromag-screen-keypad-popupBackdrop","button":"micromag-screen-keypad-button","background":"micromag-screen-keypad-background","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","fixedHeader":"micromag-screen-keypad-fixedHeader","open":"micromag-screen-keypad-open","closeIcon":"micromag-screen-keypad-closeIcon","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","inner":"micromag-screen-keypad-inner","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","disableHover":"micromag-screen-keypad-disableHover","isLink":"micromag-screen-keypad-isLink","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popupScroll":"micromag-screen-keypad-popupScroll","popupInner":"micromag-screen-keypad-popupInner","withShadow":"micromag-screen-keypad-withShadow","popupContent":"micromag-screen-keypad-popupContent","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","emptyCTA":"micromag-screen-keypad-emptyCTA","popupCTA":"micromag-screen-keypad-popupCTA","contentBottom":"micromag-screen-keypad-contentBottom","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual","fillImage":"micromag-screen-keypad-fillImage"};
 
 var placeholders = [{
   id: '1'
@@ -109,7 +109,9 @@ var propTypes = {
   buttonStyles: PropTypes.shape({
     layout: PropTypes.string,
     textStyle: PropTypes$1.textStyle,
-    boxStyle: PropTypes$1.boxStyle
+    boxStyle: PropTypes$1.boxStyle,
+    fillImage: PropTypes.bool,
+    alignment: PropTypes$1.alignment
   }),
   popupStyles: PropTypes.shape({
     layout: PropTypes.oneOf(['content-top', 'content-split', 'content-bottom']),
@@ -192,53 +194,57 @@ var KeypadScreen = function KeypadScreen(_ref) {
   var hasTitle = isTextFilled(title);
   var _ref2 = title || {},
     _ref2$textStyle = _ref2.textStyle,
-    titleTextStyle = _ref2$textStyle === undefined ? null : _ref2$textStyle;
+    titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
   var _useDimensionObserver = useDimensionObserver(),
     headerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
-    headerHeight = _useDimensionObserver2 === undefined ? 0 : _useDimensionObserver2;
+    headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
   var _useDimensionObserver3 = useDimensionObserver(),
     footerRef = _useDimensionObserver3.ref,
     _useDimensionObserver4 = _useDimensionObserver3.height,
-    footerHeight = _useDimensionObserver4 === undefined ? 0 : _useDimensionObserver4;
+    footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
   var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = !isPlaceholder && (current || preload);
   var isInteractivePreview = isEdit && screenState === null;
   var _ref3 = keypadSettings || {},
     _ref3$layout = _ref3.layout,
-    keypadLayout = _ref3$layout === undefined ? null : _ref3$layout;
+    keypadLayout = _ref3$layout === void 0 ? null : _ref3$layout;
   var _ref4 = keypadLayout || {},
     _ref4$columnAlign = _ref4.columnAlign,
-    columnAlign = _ref4$columnAlign === undefined ? null : _ref4$columnAlign,
+    columnAlign = _ref4$columnAlign === void 0 ? null : _ref4$columnAlign,
     _ref4$columns = _ref4.columns,
-    columns = _ref4$columns === undefined ? null : _ref4$columns,
+    columns = _ref4$columns === void 0 ? null : _ref4$columns,
     _ref4$spacing = _ref4.spacing,
-    columnSpacing = _ref4$spacing === undefined ? null : _ref4$spacing,
+    columnSpacing = _ref4$spacing === void 0 ? null : _ref4$spacing,
     _ref4$withSquareItems = _ref4.withSquareItems,
-    withSquareItems = _ref4$withSquareItems === undefined ? false : _ref4$withSquareItems;
+    withSquareItems = _ref4$withSquareItems === void 0 ? false : _ref4$withSquareItems;
   var _ref5 = buttonStyles || {},
     _ref5$layout = _ref5.layout,
-    buttonLayout = _ref5$layout === undefined ? null : _ref5$layout,
+    buttonLayout = _ref5$layout === void 0 ? null : _ref5$layout,
     _ref5$textStyle = _ref5.textStyle,
-    buttonTextStyle = _ref5$textStyle === undefined ? null : _ref5$textStyle,
+    buttonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
     _ref5$boxStyle = _ref5.boxStyle,
-    buttonBoxStyle = _ref5$boxStyle === undefined ? null : _ref5$boxStyle;
+    buttonBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle,
+    _ref5$fillImage = _ref5.fillImage,
+    fillImage = _ref5$fillImage === void 0 ? false : _ref5$fillImage,
+    _ref5$alignment = _ref5.alignment,
+    buttonAlignment = _ref5$alignment === void 0 ? null : _ref5$alignment;
   var _ref6 = popupStyles || {},
     _ref6$layout = _ref6.layout,
-    popupLayout = _ref6$layout === undefined ? null : _ref6$layout,
+    popupLayout = _ref6$layout === void 0 ? null : _ref6$layout,
     _ref6$headingTextStyl = _ref6.headingTextStyle,
-    headingTextStyle = _ref6$headingTextStyl === undefined ? null : _ref6$headingTextStyl,
+    headingTextStyle = _ref6$headingTextStyl === void 0 ? null : _ref6$headingTextStyl,
     _ref6$contentTextStyl = _ref6.contentTextStyle,
-    contentTextStyle = _ref6$contentTextStyl === undefined ? null : _ref6$contentTextStyl,
+    contentTextStyle = _ref6$contentTextStyl === void 0 ? null : _ref6$contentTextStyl,
     _ref6$button = _ref6.button,
-    popupButtons = _ref6$button === undefined ? null : _ref6$button,
+    popupButtons = _ref6$button === void 0 ? null : _ref6$button,
     _ref6$boxStyle = _ref6.boxStyle,
-    popupBoxStyle = _ref6$boxStyle === undefined ? null : _ref6$boxStyle;
+    popupBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
   var _ref7 = popupButtons || {},
     _ref7$buttonTextStyle = _ref7.buttonTextStyle,
-    popupButtonsTextStyle = _ref7$buttonTextStyle === undefined ? null : _ref7$buttonTextStyle,
+    popupButtonsTextStyle = _ref7$buttonTextStyle === void 0 ? null : _ref7$buttonTextStyle,
     _ref7$boxStyle = _ref7.boxStyle,
-    popupButtonsBoxStyle = _ref7$boxStyle === undefined ? null : _ref7$boxStyle;
+    popupButtonsBoxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
   var popupLayoutClassName = useMemo(function () {
     return popupLayout !== null ? camelCase(popupLayout) : '';
   }, [popupLayout]);
@@ -252,38 +258,38 @@ var KeypadScreen = function KeypadScreen(_ref) {
     setPopup = _useState4[1];
   var _ref8 = popup || {},
     _ref8$heading = _ref8.heading,
-    popupHeading = _ref8$heading === undefined ? null : _ref8$heading,
+    popupHeading = _ref8$heading === void 0 ? null : _ref8$heading,
     _ref8$content = _ref8.content,
-    popupContent = _ref8$content === undefined ? null : _ref8$content,
+    popupContent = _ref8$content === void 0 ? null : _ref8$content,
     _ref8$largeVisual = _ref8.largeVisual,
-    largeVisual = _ref8$largeVisual === undefined ? null : _ref8$largeVisual,
+    largeVisual = _ref8$largeVisual === void 0 ? null : _ref8$largeVisual,
     _ref8$button = _ref8.button,
-    popupButton = _ref8$button === undefined ? null : _ref8$button;
+    popupButton = _ref8$button === void 0 ? null : _ref8$button;
   var hasPopupHeading = isTextFilled(popupHeading);
   var _ref9 = popupHeading || {},
     _ref9$textStyle = _ref9.textStyle,
-    popupHeadingTextStyle = _ref9$textStyle === undefined ? null : _ref9$textStyle;
+    popupHeadingTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
   var hasPopupContent = isTextFilled(popupContent);
   var _ref10 = popupContent || {},
     _ref10$textStyle = _ref10.textStyle,
-    popupContentTextStyle = _ref10$textStyle === undefined ? null : _ref10$textStyle;
+    popupContentTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
   var _ref11 = popupButton || {},
     _ref11$label = _ref11.label,
-    buttonLabel = _ref11$label === undefined ? null : _ref11$label,
+    buttonLabel = _ref11$label === void 0 ? null : _ref11$label,
     _ref11$url = _ref11.url,
-    buttonUrl = _ref11$url === undefined ? null : _ref11$url,
+    buttonUrl = _ref11$url === void 0 ? null : _ref11$url,
     _ref11$inWebView = _ref11.inWebView,
-    popupInWebView = _ref11$inWebView === undefined ? false : _ref11$inWebView,
+    popupInWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
     _ref11$boxStyle = _ref11.boxStyle,
-    popupButtonBoxStyle = _ref11$boxStyle === undefined ? null : _ref11$boxStyle;
+    popupButtonBoxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle;
   var onItemClick = useCallback(function (e, item) {
     e.stopPropagation();
     trackScreenEvent('click_item', item);
     var _ref12 = item || {},
       _ref12$inWebView = _ref12.inWebView,
-      inWebView = _ref12$inWebView === undefined ? false : _ref12$inWebView,
+      inWebView = _ref12$inWebView === void 0 ? false : _ref12$inWebView,
       _ref12$url = _ref12.url,
-      url = _ref12$url === undefined ? null : _ref12$url;
+      url = _ref12$url === void 0 ? null : _ref12$url;
     if (inWebView && url !== null) {
       openWebView({
         url: url
@@ -314,7 +320,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
     setPopupDragDirection = _useState6[1];
   var onPopupScrollHeightChange = useCallback(function (_ref13) {
     var _ref13$scrolleeHeight = _ref13.scrolleeHeight,
-      scrolleeHeight = _ref13$scrolleeHeight === undefined ? 0 : _ref13$scrolleeHeight;
+      scrolleeHeight = _ref13$scrolleeHeight === void 0 ? 0 : _ref13$scrolleeHeight;
     if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
       setPopupDragDirection('top');
     } else {
@@ -410,34 +416,36 @@ var KeypadScreen = function KeypadScreen(_ref) {
     return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
       var _ref15 = item || {},
         _ref15$id = _ref15.id,
-        id = _ref15$id === undefined ? null : _ref15$id,
+        id = _ref15$id === void 0 ? null : _ref15$id,
         _ref15$label = _ref15.label,
-        label = _ref15$label === undefined ? null : _ref15$label,
+        label = _ref15$label === void 0 ? null : _ref15$label,
         _ref15$visual = _ref15.visual,
-        visual = _ref15$visual === undefined ? null : _ref15$visual,
+        visual = _ref15$visual === void 0 ? null : _ref15$visual,
         _ref15$textStyle = _ref15.textStyle,
-        textStyle = _ref15$textStyle === undefined ? null : _ref15$textStyle,
+        textStyle = _ref15$textStyle === void 0 ? null : _ref15$textStyle,
         _ref15$boxStyle = _ref15.boxStyle,
-        boxStyle = _ref15$boxStyle === undefined ? null : _ref15$boxStyle,
+        boxStyle = _ref15$boxStyle === void 0 ? null : _ref15$boxStyle,
+        _ref15$alignment = _ref15.alignment,
+        alignment = _ref15$alignment === void 0 ? null : _ref15$alignment,
         _ref15$heading = _ref15.heading,
-        heading = _ref15$heading === undefined ? null : _ref15$heading,
+        heading = _ref15$heading === void 0 ? null : _ref15$heading,
         _ref15$content = _ref15.content,
-        content = _ref15$content === undefined ? null : _ref15$content,
+        content = _ref15$content === void 0 ? null : _ref15$content,
         _ref15$url = _ref15.url,
-        url = _ref15$url === undefined ? null : _ref15$url,
+        url = _ref15$url === void 0 ? null : _ref15$url,
         _ref15$inWebView = _ref15.inWebView,
-        inWebView = _ref15$inWebView === undefined ? false : _ref15$inWebView,
+        inWebView = _ref15$inWebView === void 0 ? false : _ref15$inWebView,
         _ref15$largeVisual = _ref15.largeVisual,
-        popupLargeVisual = _ref15$largeVisual === undefined ? null : _ref15$largeVisual;
+        popupLargeVisual = _ref15$largeVisual === void 0 ? null : _ref15$largeVisual;
       var _ref16 = visual || {},
         _ref16$url = _ref16.url,
-        visualUrl = _ref16$url === undefined ? null : _ref16$url;
+        visualUrl = _ref16$url === void 0 ? null : _ref16$url;
       var _ref17 = heading || {},
         _ref17$body = _ref17.body,
-        headingBody = _ref17$body === undefined ? null : _ref17$body;
+        headingBody = _ref17$body === void 0 ? null : _ref17$body;
       var _ref18 = content || {},
         _ref18$body = _ref18.body,
-        contentBody = _ref18$body === undefined ? null : _ref18$body;
+        contentBody = _ref18$body === void 0 ? null : _ref18$body;
       var key = label || visualUrl || id;
       var isEmpty = label === null && visual === null;
       var isExternalLink = url !== null && !inWebView;
@@ -446,8 +454,8 @@ var KeypadScreen = function KeypadScreen(_ref) {
         key: key,
         className: styles.item
       }, /*#__PURE__*/React.createElement(Button, {
-        className: classNames([styles.button, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), styles.layoutLabelTop, buttonLayout === 'label-top'), styles.layoutNoLabel, buttonLayout === 'no-label'), styles.layoutLabelOver, buttonLayout === 'label-over'), styles.isEmpty, isEmpty), styles.isLink, url !== null), styles.disableHover, isPopupEmpty && url === null)]),
-        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromText(buttonTextStyle)), getStyleFromBox(boxStyle)), getStyleFromText(textStyle)),
+        className: classNames([styles.button, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), styles.layoutLabelTop, buttonLayout === 'label-top'), styles.layoutNoLabel, buttonLayout === 'no-label'), styles.layoutLabelOver, buttonLayout === 'label-over'), styles.fillImage, fillImage === true), styles.isEmpty, isEmpty), styles.isLink, url !== null), styles.disableHover, isPopupEmpty && url === null)]),
+        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromText(buttonTextStyle)), getStyleFromBox(boxStyle)), getStyleFromText(textStyle)), getStyleFromAlignment(alignment || buttonAlignment, true, 'flex-start')),
         external: isExternalLink,
         href: isExternalLink ? url : null,
         focusable: current,
@@ -484,7 +492,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
         className: styles.buttonLabel
       }, label) : null)));
     });
-  }, [items, screenState, keypadSettings]);
+  }, [items, screenState, keypadSettings, buttonAlignment, buttonBoxStyle, buttonTextStyle, buttonLayout]);
   useEffect(function () {
     if (screenState === 'popup' && isPlaceholder) {
       setPopup(placeholderPopupBoxStyles); // @note force placeholder
@@ -505,9 +513,6 @@ var KeypadScreen = function KeypadScreen(_ref) {
       setShowPopup(false);
     }
   }, [screenState, items, isView, showPopup, setPopup, setShowPopup]);
-
-  // console.log(showPopup, popup, isView);
-
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder), styles.withSquareItems, withSquareItems)]),
@@ -624,7 +629,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
     withShadow: true
   }, /*#__PURE__*/React.createElement("div", {
     ref: popupInnerRef,
-    className: classNames([styles.popupInner, styles[popupLayoutClassName]]),
+    className: classNames([styles.popupInner, styles[popupLayoutClassName], _defineProperty({}, styles.withShadow, popupBoxStyle === null)]),
     style: _objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle))
   }, /*#__PURE__*/React.createElement(ScreenElement, {
     emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -816,7 +821,27 @@ var definition = [{
             "value": "Button style"
           }]
         })
-      }]
+      }, {
+        name: 'fillImage',
+        type: 'toggle',
+        label: defineMessage({
+          id: "6LFjCH",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Fill with image"
+          }]
+        })
+      }
+      // This works but might not be the best way
+      // {
+      //     name: 'alignment',
+      //     type: 'alignment',
+      //     label: defineMessage({
+      //         defaultMessage: 'Button alignment',
+      //         description: 'Field label',
+      //     }),
+      // },
+      ]
     }]
   }, {
     id: 'popups',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-keypad",
-    "version": "0.3.651",
+    "version": "0.3.657",
     "private": false,
     "description": "",
     "keywords": [
@@ -65,22 +65,22 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.651",
-        "@micromag/element-background": "^0.3.651",
-        "@micromag/element-button": "^0.3.651",
-        "@micromag/element-call-to-action": "^0.3.651",
-        "@micromag/element-container": "^0.3.651",
-        "@micromag/element-footer": "^0.3.651",
-        "@micromag/element-grid": "^0.3.651",
-        "@micromag/element-header": "^0.3.651",
-        "@micromag/element-heading": "^0.3.651",
-        "@micromag/element-keypad": "^0.3.651",
-        "@micromag/element-layout": "^0.3.651",
-        "@micromag/element-scroll": "^0.3.651",
-        "@micromag/element-text": "^0.3.651",
-        "@micromag/element-urbania-author": "^0.3.651",
-        "@micromag/element-visual": "^0.3.651",
-        "@micromag/transforms": "^0.3.651",
+        "@micromag/core": "^0.3.656",
+        "@micromag/element-background": "^0.3.656",
+        "@micromag/element-button": "^0.3.656",
+        "@micromag/element-call-to-action": "^0.3.656",
+        "@micromag/element-container": "^0.3.656",
+        "@micromag/element-footer": "^0.3.656",
+        "@micromag/element-grid": "^0.3.656",
+        "@micromag/element-header": "^0.3.656",
+        "@micromag/element-heading": "^0.3.656",
+        "@micromag/element-keypad": "^0.3.656",
+        "@micromag/element-layout": "^0.3.656",
+        "@micromag/element-scroll": "^0.3.656",
+        "@micromag/element-text": "^0.3.656",
+        "@micromag/element-urbania-author": "^0.3.656",
+        "@micromag/element-visual": "^0.3.656",
+        "@micromag/transforms": "^0.3.656",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -95,5 +95,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9639dccc046f7adfe9673f53ede77360b8b75d51"
+    "gitHead": "7f237bb9a57d7f572c11eb0295455bc849efe9ee"
 }