@airgap/beacon-ui - npm Package Compare versions

Comparing version 3.3.3 to 3.3.4

dist/cjs/ui/alert/alert-templates.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.alertTemplates = void 0;
-exports.alertTemplates = { "default": { "css": ":host {\n  --animation-duration: 300ms;\n  all: initial;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.animated {\n  animation-duration: var(--animation-duration);\n  animation-fill-mode: both;\n}\n\n.fadeIn {\n  animation-name: fadeIn;\n}\n\n.fadeOut {\n  animation-name: fadeOut;\n}\n\n.beacon-modal__wrapper {\n  position: relative;\n  top: 0;\n  display: inline-block;\n  z-index: 2147483000;\n  max-width: 500px;\n  width: 80%;\n  padding: 24px;\n}\n\n@media (min-height: 700px) {\n  .beacon-modal__wrapper {\n    top: 50%;\n    transform: translateY(-50%);\n  }\n}\n\n.theme__light .beacon-modal__base,\n.theme__light .beacon-modal__close__wrapper {\n  background: #fff;\n}\n\n.theme__dark .beacon-modal__base,\n.theme__dark .beacon-modal__close__wrapper {\n  background: #27334c;\n}\n\n.beacon-modal__base,\n.beacon-modal__close__wrapper {\n  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.beacon-modal__base {\n  margin: 0 auto;\n  border-radius: 32px;\n  overflow: hidden;\n}\n\n.beacon-modal__header {\n  padding: 16px 0;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.beacon-modal__headerLogo {\n  width: 100%;\n  max-width: 320px;\n  margin: 20px auto;\n  height: 100%;\n}\n\na,\nbutton {\n  cursor: pointer;\n}\n\n.beacon-modal__close__wrapper {\n  position: absolute;\n  top: 44px;\n  right: 24px;\n  z-index: 10000;\n  cursor: pointer;\n  border-radius: 100%;\n}\n\n.beacon-modal__close__icon {\n  width: 16px;\n  height: 16px;\n  position: relative;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(45deg);\n  margin: 8px;\n}\n\n.beacon-modal__close__line1 {\n  position: absolute;\n  width: 90%;\n}\n\n.beacon-modal__close__line2 {\n  position: absolute;\n  width: 90%;\n  transform: rotate(90deg);\n}\n\n.theme__light .beacon-modal__close__line2,\n.theme__light .beacon-modal__close__line1 {\n  border: 1px solid #000;\n}\n\n.theme__dark .beacon-modal__close__line2,\n.theme__dark .beacon-modal__close__line1 {\n  border: 1px solid #fff;\n}\n\n.beacon-alert__base {\n  position: fixed;\n  overflow-y: scroll;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 2147482999;\n  background-color: rgb(17 17 17 / 0.84);\n  text-align: center;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  font-family: Roboto, Helvetica, sans-serif;\n}\n\n.beacon-alert__base::-webkit-scrollbar {\n  display: none;\n}\n\n.beacon-alert__title {\n  text-align: center;\n}\n\n.beacon-alert__text,\n.beacon-alert__title {\n  margin: 0 auto;\n  padding: 0 0 24px;\n}\n\n.margin__bottom {\n  margin-bottom: 16px;\n}\n\n.beacon-alert__title {\n  font-size: 18px;\n}\n\n.theme__light .beacon-alert__title {\n  color: #3b3d40;\n}\n\n.theme__dark .beacon-alert__title,\n.theme__dark .beacon-alert__text {\n  color: #7c99d6;\n}\n\n.beacon-alert__text {\n  color: #000;\n  font-size: 14px;\n}\n\n.beacon-modal__button,\n.beacon-modal__button--outline {\n  height: 36px;\n  font-size: 14px;\n  letter-spacing: 0.84px;\n  margin-bottom: 4px;\n  margin-inline-end: 2px;\n  margin-inline-start: 2px;\n  margin-left: 2px;\n  margin-right: 2px;\n  margin-top: 4px;\n  padding-inline-end: 15.4px;\n  padding-inline-start: 15.4px;\n  padding-left: 15.4px;\n  padding-right: 15.4px;\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  text-align: center;\n  border-radius: 4px;\n  border: 2px solid #3880ff;\n}\n\n.beacon-modal__button {\n  background: #3880ff;\n  color: #fff;\n}\n\n.beacon-modal__button--outline {\n  background: #fff;\n  color: #444444;\n  border: 1px solid #444444;\n}\n\n.beacon-alert__image {\n  width: 200px;\n  height: 200px;\n  box-sizing: border-box;\n  box-shadow: 0 10px 20px 0 rgba(17, 17, 17, 0.12);\n  border: 1px solid rgba(17, 17, 17, 0.04);\n  border-radius: 16px;\n}\n.connect__btn {\n  margin: 24px 0;\n  width: 100%;\n}\n\n#beacon-modal__content {\n  padding: 24px;\n}\n\n#beacon-switch {\n  margin-top: 24px;\n}\n\n#beacon-title {\n  margin: 0 0 24px;\n}\n\na {\n  text-decoration: none;\n}\n\npre {\n  white-space: pre-wrap; /* css-3 */\n  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */\n  white-space: -pre-wrap; /* Opera 4-6 */\n  white-space: -o-pre-wrap; /* Opera 7 */\n  word-wrap: break-word; /* Internet Explorer 5.5+ */\n  padding: 16px;\n  background: #ececec;\n  line-height: 1.25rem;\n}\n" }, "pair": { "css": "#beacon-main-text {\n  display: initial;\n}\n.beacon-selection__container {\n  padding: 16px 16px 0;\n}\n.beacon-selection__list {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  text-decoration: none;\n  padding-bottom: 12px;\n  align-items: center;\n}\n.beacon-list__title {\n  text-align: left;\n  font-size: 12px;\n}\n.beacon-list__wrapper:nth-child(-n + 3) {\n  padding: 0 0 1rem;\n}\n.theme__light .beacon-list__title {\n  color: #7c828b;\n}\n.theme__dark .beacon-list__title,\n.theme__dark #beacon--disclaimer {\n  color: #7c99d6;\n}\n\n.beacon-selection__name {\n  font-size: 1rem;\n  font-weight: 600;\n  text-align: left;\n}\n.theme__light .beacon-selection__name,\n.theme__light .beacon--selection__name__lg {\n  color: #3b3d40;\n}\n.theme__dark .beacon-selection__name,\n.theme__dark .beacon--selection__name__lg {\n  color: #6183ff;\n}\n.beacon-selection__img {\n  width: 48px;\n  height: 48px;\n  box-shadow: 0 4px 12px 0 rgba(17, 17, 17, 0.24);\n  border-radius: 16px;\n  background-color: #fff;\n}\n.beacon--selection__name__lg {\n  font-size: 1.5rem;\n  font-weight: 600;\n  text-align: center;\n  padding: 1rem 0;\n}\n.beacon--selected__container {\n  padding: 2rem 0 0;\n}\n#beacon--qr__copy__container {\n  height: 0;\n}\n#beacon--qr__copy {\n  display: none;\n  position: relative;\n  margin-top: auto;\n  margin-left: auto;\n  margin-right: auto;\n}\n#beacon--qr__container {\n  margin-left: auto;\n  margin-right: auto;\n}\n#beacon--qr__container:hover #beacon--qr__copy {\n  display: block;\n}\n\n.disabled p {\n  text-align: left;\n  margin: 0;\n  font-size: 10px;\n  font-weight: 300;\n  opacity: 0.48;\n}\n\n#beacon--disclaimer {\n  text-align: left;\n  padding-top: 24px;\n  font-size: 0.875rem;\n}\n.progress-line,\n.progress-line:before {\n  height: 3px;\n  width: -webkit-fill-available;\n  margin-left: -24px;\n  margin-right: -24px;\n}\n.progress-line {\n  background-color: #a7c4f7;\n  display: -webkit-flex;\n  display: flex;\n}\n.progress-line:before {\n  background-color: #3880ff;\n  content: '';\n  -webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n}\n@-webkit-keyframes running-progress {\n  0% {\n    margin-left: 0px;\n    margin-right: 100%;\n  }\n  50% {\n    margin-left: 25%;\n    margin-right: 0%;\n  }\n  100% {\n    margin-left: 100%;\n    margin-right: 0;\n  }\n}\n@keyframes running-progress {\n  0% {\n    margin-left: 0px;\n    margin-right: 100%;\n  }\n  50% {\n    margin-left: 25%;\n    margin-right: 0%;\n  }\n  100% {\n    margin-left: 100%;\n    margin-right: 0;\n  }\n}\n" } };
+exports.alertTemplates = { "default": { "css": ":host {\n  --animation-duration: 300ms;\n  all: initial;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.animated {\n  animation-duration: var(--animation-duration);\n  animation-fill-mode: both;\n}\n\n.fadeIn {\n  animation-name: fadeIn;\n}\n\n.fadeOut {\n  animation-name: fadeOut;\n}\n\n.beacon-modal__wrapper {\n  position: relative;\n  top: 0;\n  display: inline-block;\n  z-index: 2147483000;\n  max-width: 500px;\n  width: 80%;\n  padding: 24px;\n}\n\n.theme__light .beacon-modal__base,\n.theme__light .beacon-modal__close__wrapper {\n  background: #fff;\n}\n\n.theme__dark .beacon-modal__base,\n.theme__dark .beacon-modal__close__wrapper {\n  background: #27334c;\n}\n\n.beacon-modal__base,\n.beacon-modal__close__wrapper {\n  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.beacon-modal__base {\n  margin: 0 auto;\n  border-radius: 32px;\n  overflow: hidden;\n}\n\n.beacon-modal__header {\n  padding: 16px 0;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.beacon-modal__headerLogo {\n  width: 100%;\n  max-width: 320px;\n  margin: 20px auto;\n  height: 100%;\n}\n\na,\nbutton {\n  cursor: pointer;\n}\n\n.beacon-modal__close__wrapper {\n  position: absolute;\n  top: 44px;\n  right: 24px;\n  z-index: 10000;\n  cursor: pointer;\n  border-radius: 100%;\n}\n\n.beacon-modal__close__icon {\n  width: 16px;\n  height: 16px;\n  position: relative;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(45deg);\n  margin: 8px;\n}\n\n.beacon-modal__close__line1 {\n  position: absolute;\n  width: 90%;\n}\n\n.beacon-modal__close__line2 {\n  position: absolute;\n  width: 90%;\n  transform: rotate(90deg);\n}\n\n.theme__light .beacon-modal__close__line2,\n.theme__light .beacon-modal__close__line1 {\n  border: 1px solid #000;\n}\n\n.theme__dark .beacon-modal__close__line2,\n.theme__dark .beacon-modal__close__line1 {\n  border: 1px solid #fff;\n}\n\n.beacon-alert__base {\n  position: fixed;\n  overflow-y: scroll;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 2147482999;\n  background-color: rgb(17 17 17 / 0.84);\n  text-align: center;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  font-family: Roboto, Helvetica, sans-serif;\n}\n\n.beacon-alert__base::-webkit-scrollbar {\n  display: none;\n}\n\n.beacon-alert__title {\n  text-align: center;\n}\n\n.beacon-alert__text,\n.beacon-alert__title {\n  margin: 0 auto;\n  padding: 0 0 24px;\n}\n\n.margin__bottom {\n  margin-bottom: 16px;\n}\n\n.beacon-alert__title {\n  font-size: 18px;\n}\n\n.theme__light .beacon-alert__title {\n  color: #3b3d40;\n}\n\n.theme__dark .beacon-alert__title,\n.theme__dark .beacon-alert__text {\n  color: #7c99d6;\n}\n\n.beacon-alert__text {\n  color: #000;\n  font-size: 14px;\n}\n\n.beacon-modal__button,\n.beacon-modal__button--outline {\n  height: 36px;\n  font-size: 14px;\n  letter-spacing: 0.84px;\n  margin-bottom: 4px;\n  margin-inline-end: 2px;\n  margin-inline-start: 2px;\n  margin-left: 2px;\n  margin-right: 2px;\n  margin-top: 4px;\n  padding-inline-end: 15.4px;\n  padding-inline-start: 15.4px;\n  padding-left: 15.4px;\n  padding-right: 15.4px;\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  text-align: center;\n  border-radius: 4px;\n  border: 2px solid #3880ff;\n}\n\n.beacon-modal__button {\n  background: #3880ff;\n  color: #fff;\n}\n\n.beacon-modal__button--outline {\n  background: #fff;\n  color: #444444;\n  border: 1px solid #444444;\n}\n\n.beacon-alert__image {\n  width: 200px;\n  height: 200px;\n  box-sizing: border-box;\n  box-shadow: 0 10px 20px 0 rgba(17, 17, 17, 0.12);\n  border: 1px solid rgba(17, 17, 17, 0.04);\n  border-radius: 16px;\n}\n.connect__btn {\n  margin: 24px 0;\n  width: 100%;\n}\n\n#beacon-modal__content {\n  padding: 24px;\n}\n\n#beacon-switch {\n  margin-top: 24px;\n}\n\n#beacon-title {\n  margin: 0 0 24px;\n}\n\na {\n  text-decoration: none;\n}\n\npre {\n  white-space: pre-wrap; /* css-3 */\n  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */\n  white-space: -pre-wrap; /* Opera 4-6 */\n  white-space: -o-pre-wrap; /* Opera 7 */\n  word-wrap: break-word; /* Internet Explorer 5.5+ */\n  padding: 16px;\n  background: #ececec;\n  line-height: 1.25rem;\n}\n" }, "pair": { "css": "#beacon-main-text {\n  display: initial;\n}\n.beacon-selection__container {\n  padding: 16px 16px 0;\n}\n.beacon-selection__list {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  text-decoration: none;\n  padding-bottom: 12px;\n  align-items: center;\n}\n.beacon-list__title {\n  text-align: left;\n  font-size: 12px;\n}\n.beacon-list__wrapper:nth-child(-n + 3) {\n  padding: 0 0 1rem;\n}\n.theme__light .beacon-list__title {\n  color: #7c828b;\n}\n.theme__dark .beacon-list__title,\n.theme__dark #beacon--disclaimer {\n  color: #7c99d6;\n}\n\n.beacon-selection__name {\n  font-size: 1rem;\n  font-weight: 600;\n  text-align: left;\n}\n.theme__light .beacon-selection__name,\n.theme__light .beacon--selection__name__lg {\n  color: #3b3d40;\n}\n.theme__dark .beacon-selection__name,\n.theme__dark .beacon--selection__name__lg {\n  color: #6183ff;\n}\n.beacon-selection__img {\n  width: 48px;\n  height: 48px;\n  box-shadow: 0 4px 12px 0 rgba(17, 17, 17, 0.24);\n  border-radius: 16px;\n  background-color: #fff;\n}\n.beacon--selection__name__lg {\n  font-size: 1.5rem;\n  font-weight: 600;\n  text-align: center;\n  padding: 1rem 0;\n}\n.beacon--selected__container {\n  padding: 2rem 0 0;\n}\n#beacon--qr__copy__container {\n  height: 0;\n}\n#beacon--qr__copy {\n  display: none;\n  position: relative;\n  margin-top: auto;\n  margin-left: auto;\n  margin-right: auto;\n}\n#beacon--qr__container {\n  margin-left: auto;\n  margin-right: auto;\n}\n#beacon--qr__container:hover #beacon--qr__copy {\n  display: block;\n}\n\n.disabled p {\n  text-align: left;\n  margin: 0;\n  font-size: 10px;\n  font-weight: 300;\n  opacity: 0.48;\n}\n\n#beacon--disclaimer {\n  text-align: left;\n  padding-top: 24px;\n  font-size: 0.875rem;\n}\n.progress-line,\n.progress-line:before {\n  height: 3px;\n  width: -webkit-fill-available;\n  margin-left: -24px;\n  margin-right: -24px;\n}\n.progress-line {\n  background-color: #a7c4f7;\n  display: -webkit-flex;\n  display: flex;\n}\n.progress-line:before {\n  background-color: #3880ff;\n  content: '';\n  -webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n}\n@-webkit-keyframes running-progress {\n  0% {\n    margin-left: 0px;\n    margin-right: 100%;\n  }\n  50% {\n    margin-left: 25%;\n    margin-right: 0%;\n  }\n  100% {\n    margin-left: 100%;\n    margin-right: 0;\n  }\n}\n@keyframes running-progress {\n  0% {\n    margin-left: 0px;\n    margin-right: 100%;\n  }\n  50% {\n    margin-left: 25%;\n    margin-right: 0%;\n  }\n  100% {\n    margin-left: 100%;\n    margin-right: 0;\n  }\n}\n" } };
 //# sourceMappingURL=alert-templates.js.map

dist/esm/ui/alert/alert-templates.js

@@ -1,2 +0,2 @@
-export const alertTemplates = { "default": { "css": ":host {\n  --animation-duration: 300ms;\n  all: initial;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.animated {\n  animation-duration: var(--animation-duration);\n  animation-fill-mode: both;\n}\n\n.fadeIn {\n  animation-name: fadeIn;\n}\n\n.fadeOut {\n  animation-name: fadeOut;\n}\n\n.beacon-modal__wrapper {\n  position: relative;\n  top: 0;\n  display: inline-block;\n  z-index: 2147483000;\n  max-width: 500px;\n  width: 80%;\n  padding: 24px;\n}\n\n@media (min-height: 700px) {\n  .beacon-modal__wrapper {\n    top: 50%;\n    transform: translateY(-50%);\n  }\n}\n\n.theme__light .beacon-modal__base,\n.theme__light .beacon-modal__close__wrapper {\n  background: #fff;\n}\n\n.theme__dark .beacon-modal__base,\n.theme__dark .beacon-modal__close__wrapper {\n  background: #27334c;\n}\n\n.beacon-modal__base,\n.beacon-modal__close__wrapper {\n  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.beacon-modal__base {\n  margin: 0 auto;\n  border-radius: 32px;\n  overflow: hidden;\n}\n\n.beacon-modal__header {\n  padding: 16px 0;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.beacon-modal__headerLogo {\n  width: 100%;\n  max-width: 320px;\n  margin: 20px auto;\n  height: 100%;\n}\n\na,\nbutton {\n  cursor: pointer;\n}\n\n.beacon-modal__close__wrapper {\n  position: absolute;\n  top: 44px;\n  right: 24px;\n  z-index: 10000;\n  cursor: pointer;\n  border-radius: 100%;\n}\n\n.beacon-modal__close__icon {\n  width: 16px;\n  height: 16px;\n  position: relative;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(45deg);\n  margin: 8px;\n}\n\n.beacon-modal__close__line1 {\n  position: absolute;\n  width: 90%;\n}\n\n.beacon-modal__close__line2 {\n  position: absolute;\n  width: 90%;\n  transform: rotate(90deg);\n}\n\n.theme__light .beacon-modal__close__line2,\n.theme__light .beacon-modal__close__line1 {\n  border: 1px solid #000;\n}\n\n.theme__dark .beacon-modal__close__line2,\n.theme__dark .beacon-modal__close__line1 {\n  border: 1px solid #fff;\n}\n\n.beacon-alert__base {\n  position: fixed;\n  overflow-y: scroll;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 2147482999;\n  background-color: rgb(17 17 17 / 0.84);\n  text-align: center;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  font-family: Roboto, Helvetica, sans-serif;\n}\n\n.beacon-alert__base::-webkit-scrollbar {\n  display: none;\n}\n\n.beacon-alert__title {\n  text-align: center;\n}\n\n.beacon-alert__text,\n.beacon-alert__title {\n  margin: 0 auto;\n  padding: 0 0 24px;\n}\n\n.margin__bottom {\n  margin-bottom: 16px;\n}\n\n.beacon-alert__title {\n  font-size: 18px;\n}\n\n.theme__light .beacon-alert__title {\n  color: #3b3d40;\n}\n\n.theme__dark .beacon-alert__title,\n.theme__dark .beacon-alert__text {\n  color: #7c99d6;\n}\n\n.beacon-alert__text {\n  color: #000;\n  font-size: 14px;\n}\n\n.beacon-modal__button,\n.beacon-modal__button--outline {\n  height: 36px;\n  font-size: 14px;\n  letter-spacing: 0.84px;\n  margin-bottom: 4px;\n  margin-inline-end: 2px;\n  margin-inline-start: 2px;\n  margin-left: 2px;\n  margin-right: 2px;\n  margin-top: 4px;\n  padding-inline-end: 15.4px;\n  padding-inline-start: 15.4px;\n  padding-left: 15.4px;\n  padding-right: 15.4px;\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  text-align: center;\n  border-radius: 4px;\n  border: 2px solid #3880ff;\n}\n\n.beacon-modal__button {\n  background: #3880ff;\n  color: #fff;\n}\n\n.beacon-modal__button--outline {\n  background: #fff;\n  color: #444444;\n  border: 1px solid #444444;\n}\n\n.beacon-alert__image {\n  width: 200px;\n  height: 200px;\n  box-sizing: border-box;\n  box-shadow: 0 10px 20px 0 rgba(17, 17, 17, 0.12);\n  border: 1px solid rgba(17, 17, 17, 0.04);\n  border-radius: 16px;\n}\n.connect__btn {\n  margin: 24px 0;\n  width: 100%;\n}\n\n#beacon-modal__content {\n  padding: 24px;\n}\n\n#beacon-switch {\n  margin-top: 24px;\n}\n\n#beacon-title {\n  margin: 0 0 24px;\n}\n\na {\n  text-decoration: none;\n}\n\npre {\n  white-space: pre-wrap; /* css-3 */\n  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */\n  white-space: -pre-wrap; /* Opera 4-6 */\n  white-space: -o-pre-wrap; /* Opera 7 */\n  word-wrap: break-word; /* Internet Explorer 5.5+ */\n  padding: 16px;\n  background: #ececec;\n  line-height: 1.25rem;\n}\n" }, "pair": { "css": "#beacon-main-text {\n  display: initial;\n}\n.beacon-selection__container {\n  padding: 16px 16px 0;\n}\n.beacon-selection__list {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  text-decoration: none;\n  padding-bottom: 12px;\n  align-items: center;\n}\n.beacon-list__title {\n  text-align: left;\n  font-size: 12px;\n}\n.beacon-list__wrapper:nth-child(-n + 3) {\n  padding: 0 0 1rem;\n}\n.theme__light .beacon-list__title {\n  color: #7c828b;\n}\n.theme__dark .beacon-list__title,\n.theme__dark #beacon--disclaimer {\n  color: #7c99d6;\n}\n\n.beacon-selection__name {\n  font-size: 1rem;\n  font-weight: 600;\n  text-align: left;\n}\n.theme__light .beacon-selection__name,\n.theme__light .beacon--selection__name__lg {\n  color: #3b3d40;\n}\n.theme__dark .beacon-selection__name,\n.theme__dark .beacon--selection__name__lg {\n  color: #6183ff;\n}\n.beacon-selection__img {\n  width: 48px;\n  height: 48px;\n  box-shadow: 0 4px 12px 0 rgba(17, 17, 17, 0.24);\n  border-radius: 16px;\n  background-color: #fff;\n}\n.beacon--selection__name__lg {\n  font-size: 1.5rem;\n  font-weight: 600;\n  text-align: center;\n  padding: 1rem 0;\n}\n.beacon--selected__container {\n  padding: 2rem 0 0;\n}\n#beacon--qr__copy__container {\n  height: 0;\n}\n#beacon--qr__copy {\n  display: none;\n  position: relative;\n  margin-top: auto;\n  margin-left: auto;\n  margin-right: auto;\n}\n#beacon--qr__container {\n  margin-left: auto;\n  margin-right: auto;\n}\n#beacon--qr__container:hover #beacon--qr__copy {\n  display: block;\n}\n\n.disabled p {\n  text-align: left;\n  margin: 0;\n  font-size: 10px;\n  font-weight: 300;\n  opacity: 0.48;\n}\n\n#beacon--disclaimer {\n  text-align: left;\n  padding-top: 24px;\n  font-size: 0.875rem;\n}\n.progress-line,\n.progress-line:before {\n  height: 3px;\n  width: -webkit-fill-available;\n  margin-left: -24px;\n  margin-right: -24px;\n}\n.progress-line {\n  background-color: #a7c4f7;\n  display: -webkit-flex;\n  display: flex;\n}\n.progress-line:before {\n  background-color: #3880ff;\n  content: '';\n  -webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n}\n@-webkit-keyframes running-progress {\n  0% {\n    margin-left: 0px;\n    margin-right: 100%;\n  }\n  50% {\n    margin-left: 25%;\n    margin-right: 0%;\n  }\n  100% {\n    margin-left: 100%;\n    margin-right: 0;\n  }\n}\n@keyframes running-progress {\n  0% {\n    margin-left: 0px;\n    margin-right: 100%;\n  }\n  50% {\n    margin-left: 25%;\n    margin-right: 0%;\n  }\n  100% {\n    margin-left: 100%;\n    margin-right: 0;\n  }\n}\n" } };
+export const alertTemplates = { "default": { "css": ":host {\n  --animation-duration: 300ms;\n  all: initial;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.animated {\n  animation-duration: var(--animation-duration);\n  animation-fill-mode: both;\n}\n\n.fadeIn {\n  animation-name: fadeIn;\n}\n\n.fadeOut {\n  animation-name: fadeOut;\n}\n\n.beacon-modal__wrapper {\n  position: relative;\n  top: 0;\n  display: inline-block;\n  z-index: 2147483000;\n  max-width: 500px;\n  width: 80%;\n  padding: 24px;\n}\n\n.theme__light .beacon-modal__base,\n.theme__light .beacon-modal__close__wrapper {\n  background: #fff;\n}\n\n.theme__dark .beacon-modal__base,\n.theme__dark .beacon-modal__close__wrapper {\n  background: #27334c;\n}\n\n.beacon-modal__base,\n.beacon-modal__close__wrapper {\n  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.beacon-modal__base {\n  margin: 0 auto;\n  border-radius: 32px;\n  overflow: hidden;\n}\n\n.beacon-modal__header {\n  padding: 16px 0;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.beacon-modal__headerLogo {\n  width: 100%;\n  max-width: 320px;\n  margin: 20px auto;\n  height: 100%;\n}\n\na,\nbutton {\n  cursor: pointer;\n}\n\n.beacon-modal__close__wrapper {\n  position: absolute;\n  top: 44px;\n  right: 24px;\n  z-index: 10000;\n  cursor: pointer;\n  border-radius: 100%;\n}\n\n.beacon-modal__close__icon {\n  width: 16px;\n  height: 16px;\n  position: relative;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(45deg);\n  margin: 8px;\n}\n\n.beacon-modal__close__line1 {\n  position: absolute;\n  width: 90%;\n}\n\n.beacon-modal__close__line2 {\n  position: absolute;\n  width: 90%;\n  transform: rotate(90deg);\n}\n\n.theme__light .beacon-modal__close__line2,\n.theme__light .beacon-modal__close__line1 {\n  border: 1px solid #000;\n}\n\n.theme__dark .beacon-modal__close__line2,\n.theme__dark .beacon-modal__close__line1 {\n  border: 1px solid #fff;\n}\n\n.beacon-alert__base {\n  position: fixed;\n  overflow-y: scroll;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 2147482999;\n  background-color: rgb(17 17 17 / 0.84);\n  text-align: center;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  font-family: Roboto, Helvetica, sans-serif;\n}\n\n.beacon-alert__base::-webkit-scrollbar {\n  display: none;\n}\n\n.beacon-alert__title {\n  text-align: center;\n}\n\n.beacon-alert__text,\n.beacon-alert__title {\n  margin: 0 auto;\n  padding: 0 0 24px;\n}\n\n.margin__bottom {\n  margin-bottom: 16px;\n}\n\n.beacon-alert__title {\n  font-size: 18px;\n}\n\n.theme__light .beacon-alert__title {\n  color: #3b3d40;\n}\n\n.theme__dark .beacon-alert__title,\n.theme__dark .beacon-alert__text {\n  color: #7c99d6;\n}\n\n.beacon-alert__text {\n  color: #000;\n  font-size: 14px;\n}\n\n.beacon-modal__button,\n.beacon-modal__button--outline {\n  height: 36px;\n  font-size: 14px;\n  letter-spacing: 0.84px;\n  margin-bottom: 4px;\n  margin-inline-end: 2px;\n  margin-inline-start: 2px;\n  margin-left: 2px;\n  margin-right: 2px;\n  margin-top: 4px;\n  padding-inline-end: 15.4px;\n  padding-inline-start: 15.4px;\n  padding-left: 15.4px;\n  padding-right: 15.4px;\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  text-align: center;\n  border-radius: 4px;\n  border: 2px solid #3880ff;\n}\n\n.beacon-modal__button {\n  background: #3880ff;\n  color: #fff;\n}\n\n.beacon-modal__button--outline {\n  background: #fff;\n  color: #444444;\n  border: 1px solid #444444;\n}\n\n.beacon-alert__image {\n  width: 200px;\n  height: 200px;\n  box-sizing: border-box;\n  box-shadow: 0 10px 20px 0 rgba(17, 17, 17, 0.12);\n  border: 1px solid rgba(17, 17, 17, 0.04);\n  border-radius: 16px;\n}\n.connect__btn {\n  margin: 24px 0;\n  width: 100%;\n}\n\n#beacon-modal__content {\n  padding: 24px;\n}\n\n#beacon-switch {\n  margin-top: 24px;\n}\n\n#beacon-title {\n  margin: 0 0 24px;\n}\n\na {\n  text-decoration: none;\n}\n\npre {\n  white-space: pre-wrap; /* css-3 */\n  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */\n  white-space: -pre-wrap; /* Opera 4-6 */\n  white-space: -o-pre-wrap; /* Opera 7 */\n  word-wrap: break-word; /* Internet Explorer 5.5+ */\n  padding: 16px;\n  background: #ececec;\n  line-height: 1.25rem;\n}\n" }, "pair": { "css": "#beacon-main-text {\n  display: initial;\n}\n.beacon-selection__container {\n  padding: 16px 16px 0;\n}\n.beacon-selection__list {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  text-decoration: none;\n  padding-bottom: 12px;\n  align-items: center;\n}\n.beacon-list__title {\n  text-align: left;\n  font-size: 12px;\n}\n.beacon-list__wrapper:nth-child(-n + 3) {\n  padding: 0 0 1rem;\n}\n.theme__light .beacon-list__title {\n  color: #7c828b;\n}\n.theme__dark .beacon-list__title,\n.theme__dark #beacon--disclaimer {\n  color: #7c99d6;\n}\n\n.beacon-selection__name {\n  font-size: 1rem;\n  font-weight: 600;\n  text-align: left;\n}\n.theme__light .beacon-selection__name,\n.theme__light .beacon--selection__name__lg {\n  color: #3b3d40;\n}\n.theme__dark .beacon-selection__name,\n.theme__dark .beacon--selection__name__lg {\n  color: #6183ff;\n}\n.beacon-selection__img {\n  width: 48px;\n  height: 48px;\n  box-shadow: 0 4px 12px 0 rgba(17, 17, 17, 0.24);\n  border-radius: 16px;\n  background-color: #fff;\n}\n.beacon--selection__name__lg {\n  font-size: 1.5rem;\n  font-weight: 600;\n  text-align: center;\n  padding: 1rem 0;\n}\n.beacon--selected__container {\n  padding: 2rem 0 0;\n}\n#beacon--qr__copy__container {\n  height: 0;\n}\n#beacon--qr__copy {\n  display: none;\n  position: relative;\n  margin-top: auto;\n  margin-left: auto;\n  margin-right: auto;\n}\n#beacon--qr__container {\n  margin-left: auto;\n  margin-right: auto;\n}\n#beacon--qr__container:hover #beacon--qr__copy {\n  display: block;\n}\n\n.disabled p {\n  text-align: left;\n  margin: 0;\n  font-size: 10px;\n  font-weight: 300;\n  opacity: 0.48;\n}\n\n#beacon--disclaimer {\n  text-align: left;\n  padding-top: 24px;\n  font-size: 0.875rem;\n}\n.progress-line,\n.progress-line:before {\n  height: 3px;\n  width: -webkit-fill-available;\n  margin-left: -24px;\n  margin-right: -24px;\n}\n.progress-line {\n  background-color: #a7c4f7;\n  display: -webkit-flex;\n  display: flex;\n}\n.progress-line:before {\n  background-color: #3880ff;\n  content: '';\n  -webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n}\n@-webkit-keyframes running-progress {\n  0% {\n    margin-left: 0px;\n    margin-right: 100%;\n  }\n  50% {\n    margin-left: 25%;\n    margin-right: 0%;\n  }\n  100% {\n    margin-left: 100%;\n    margin-right: 0;\n  }\n}\n@keyframes running-progress {\n  0% {\n    margin-left: 0px;\n    margin-right: 100%;\n  }\n  50% {\n    margin-left: 25%;\n    margin-right: 0%;\n  }\n  100% {\n    margin-left: 100%;\n    margin-right: 0;\n  }\n}\n" } };
 //# sourceMappingURL=alert-templates.js.map

package.json

 {
   "name": "@airgap/beacon-ui",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "> TODO: description",
@@ -37,8 +37,8 @@ "author": "Andreas Gassmann <[e-mail]>",
   "dependencies": {
-    "@airgap/beacon-core": "^3.3.3",
-    "@airgap/beacon-transport-postmessage": "^3.3.3",
-    "@airgap/beacon-types": "^3.3.3",
-    "@airgap/beacon-utils": "^3.3.3"
+    "@airgap/beacon-core": "^3.3.4",
+    "@airgap/beacon-transport-postmessage": "^3.3.4",
+    "@airgap/beacon-types": "^3.3.4",
+    "@airgap/beacon-utils": "^3.3.4"
   },
-  "gitHead": "dadc8c2e7f6caed2029bc54603f33ef858942e89"
+  "gitHead": "434dd7ee958201825b9f56c36def02e27e396df8"
 }

No alert changes

Worsened metrics

Total package byte prevSize

435260

decreased by-0.05%

Lines of code

4739

decreased by-0.04%

Dependency changes

• Updated@airgap/beacon-core@^3.3.4

• Updated@airgap/beacon-transport-postmessage@^3.3.4

• Updated@airgap/beacon-types@^3.3.4

• Updated@airgap/beacon-utils@^3.3.4