@perceptimagery/dita-configurator-staging 0.1.7201 → 0.1.7302

package/dist/index.js

@@ -4,7 +4,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap');\n\n#Sprie-config-html,\n#Sprie-config-body {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  font-family: 'Work Sans', sans-serif;\n  box-sizing: border-box;\n}\n\n#Sprie-config-body * {\n  box-sizing: border-box;\n}\n\n.sprie-config-loadingBox {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: 24px;\n  font-weight: 500;\n  z-index: 1000;\n  background: #f2f2f2;\n}\n#Sprie-config-Main-Container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  background: #ffffff;\n}\n\n#Sprie-config-Viewer-Container {\n  width: 100%;\n  position: relative;\n  height: 100%;\n}\n\n#Sprie-config-Viewer-Container .sprie-config-webgl {\n  width: 100%;\n  height: 100%;\n}\n\n#Sprie-config-Checkout-Container {\n  width: 100%;\n  padding: 0.75rem;\n  height: min(70%, 45rem);\n}\n\n#Sprie-config-Checkout-box {\n  width: 100%;\n  background: #efefef;\n  padding: 1rem;\n  min-height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n#Sprie-config-Checkout-header {\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  padding-bottom: 0.9rem;\n  border-bottom: 1px solid #ccc;\n  margin-bottom: 2.5rem;\n}\n\n#Sprie-config-Checkout-header #Sprie-config-frameName {\n  color: #222;\n  font-size: 1.375rem;\n  font-weight: 400;\n  line-height: 1.5275rem; /* 111.091% */\n  letter-spacing: -0.05rem;\n  text-transform: uppercase;\n}\n\n#Sprie-config-Checkout-header #Sprie-config-lensPrice {\n  color: #222;\n  font-size: 1.3125rem;\n  font-weight: 400;\n  line-height: 2.275rem; /* 173.333% */\n}\n\n#Sprie-config-Checkout-body {\n  display: flex;\n  flex-direction: column;\n}\n\n#Sprie-config-Dropdown-Container {\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n#Sprie-config-Checkout-button {\n  display: flex;\n  padding: 0rem 1.25rem;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  background: #222;\n  color: #fff;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 3.5rem; /* 400% */\n  letter-spacing: 0.125rem;\n  text-transform: uppercase;\n  cursor: pointer;\n  margin-top: 6rem;\n}\n\n.sprie-config-loadingFrame {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  fontsize: 24px;\n  font-weight: 500;\n  z-index: 1000;\n  background: #f2f2f2;\n  opacity: 0.8;\n}\n\n.sprie-config-loader {\n  border: 8px solid #f3f3f3; /* Light grey */\n  border-top: 8px solid #222222; /* Blue */\n  border-radius: 50%;\n  width: 60px;\n  height: 60px;\n  animation: spin 1.5s linear infinite;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n/* Breakpoints */\n\n@media (min-width: 800px) {\n  #Sprie-config-Main-Container {\n    flex-direction: row-reverse;\n  }\n\n  #Sprie-config-Checkout-Container {\n    width: auto;\n    padding: 2.5rem;\n    height: 100%;\n  }\n\n  #Sprie-config-Checkout-box {\n    width: 350px;\n    padding: 1.5rem;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  #Sprie-config-Dropdown-Container {\n    gap: 2.5rem;\n  }\n\n  #Sprie-config-Viewer-Container .sprie-config-webgl {\n    height: 99%;\n  }\n}\n\n@media (min-width: 992px) {\n  #Sprie-config-Checkout-box {\n    width: 450px;\n    padding: 2.5rem;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n}\n/* Dropdown.css */\n\n.sprie-config-label {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.02813rem;\n  margin-bottom: 0.5rem;\n  display: flex;\n  align-items: center;\n  margin-left: 0.1rem;\n}\n\n.sprie-config-dropdown-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.sprie-config-select-box {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  /* border: 1px solid #ccc; */\n  border-radius: 5px;\n  position: relative;\n  user-select: none;\n  width: 100%;\n  box-sizing: border-box;\n  transition: border-radius 0.3s ease;\n  padding: 1rem 1.25rem;\n  background-color: #ffffff;\n  max-height: 17rem; /* Set the fixed height for the dropdown */\n  overflow-y: auto;\n}\n\n.sprie-config-select-box.sprie-config-open {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.sprie-config-selected-option {\n  flex: 1;\n}\n\n.sprie-config-arrow {\n  margin-left: 10px;\n  transition: transform 0.3s ease;\n}\n\n.sprie-config-arrow.sprie-config-up {\n  transform: rotate(180deg);\n}\n\n.sprie-config-dropdown-options {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  z-index: 1;\n  background-color: #fff;\n  border-top: 1px solid #ccc;\n  border-radius: 0 0 5px 5px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  opacity: 0;\n  visibility: hidden;\n  overflow: hidden;\n  transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;\n  max-height: 17rem; /* Set the fixed height for the dropdown */\n  overflow-y: auto;\n}\n\n.sprie-config-dropdown-options.sprie-config-open {\n  opacity: 1;\n  visibility: visible;\n  height: auto;\n  z-index: 1000;\n}\n\n.sprie-config-dropdown-options li {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\n.sprie-config-dropdown-options li:hover {\n  background-color: #f0f0f0;\n}\n\n.sprie-config-dropdown-options li.sprie-config-selected {\n  background-color: #f2f2f2; /* Highlight color for selected option */\n}\n\n.sprie-config-selected-option {\n  width: 90%;\n}\n\n.sprie-config-frame-details-wrapper {\n  display: flex;\n  gap: 1rem;\n  height: auto;\n  overflow: hidden;\n}\n\n.sprie-config-variantImgBox {\n  width: 3.4rem;\n  height: 100%;\n  display: flex;\n  align-items: center; /* Center vertically */\n  justify-content: center; /* Center horizontally */\n  background: #fff;\n}\n\n.sprie-config-details {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  overflow: hidden;\n}\n\n.sprie-config-details .sprie-config-frameName {\n  color: #4d4d4d;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem; /* 150% */\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin : 0\n}\n\n.sprie-config-details .sprie-config-skuName {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 0.96125rem; /* 109.857% */\n  letter-spacing: 0.02813rem;\n  text-transform: uppercase;\n  margin : 0\n}\n/* LensDropdown.css */\n\n.sprie-config-label {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.02813rem;\n  margin-bottom: 0.5rem;\n  display: flex;\n  align-items: center;\n  margin-left: 0.1rem;\n}\n\n.sprie-config-dropdown-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.sprie-config-select-box {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 0.125rem;\n  position: relative;\n  user-select: none;\n  width: 100%;\n  box-sizing: border-box;\n  transition: border-radius 0.3s ease;\n  background-color: #ffffff;\n}\n\n.sprie-config-select-box.sprie-config-open {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.sprie-config-selected-lens {\n  flex: 1;\n  display: flex;\n  gap: 1rem;\n  height: auto;\n}\n\n.sprie-config-selected-lens .sprie-config-lens-details {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: auto;\n  padding-bottom: 0.2rem;\n}\n\n.sprie-config-colorBox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sprie-config-lensName {\n  color: #4d4d4d;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem; /* 150% */\n  margin: 0;\n}\n\n.sprie-config-lensColor {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 0.96125rem; /* 109.857% */\n  letter-spacing: 0.02813rem;\n  text-transform: uppercase;\n  margin: 0;\n}\n\n.sprie-config-arrow {\n  margin-left: 10px;\n  transition: transform 0.3s ease;\n}\n\n.sprie-config-arrow.sprie-config-up {\n  transform: rotate(180deg);\n}\n\n.sprie-config-lens-dropdown-options {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  z-index: 100; /* Adjust z-index to ensure dropdown options are above other elements */\n  background-color: transparent;\n  border-radius: 0 0 0.125rem 0.125rem;\n  border: 0;\n  box-shadow: none;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0.3s ease;\n  max-height: 4rem; /* Set the fixed height for the dropdown */\n  overflow-x: auto;\n  overflow-y: hidden;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: no-wrap;\n  padding: 0;\n}\n\n.sprie-config-lens-dropdown-options.sprie-config-open {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sprie-config-lens-dropdown-options li {\n  padding: 1rem 1.25rem;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  padding: 0.25rem;\n}\n\n.sprie-config-lens-dropdown-options li .sprie-config-li-element {\n  width: 100%;\n  height: 100%;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sprie-config-lens-dropdown-options li .sprie-config-tooltip {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  .sprie-config-lens-dropdown-options {\n    max-height: 9.2rem;\n    overflow-x: hidden;\n    overflow-y: auto;\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    padding: 0.5rem;\n    border-top: 1px solid #ccc;\n    background-color: #fff;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n\n  .sprie-config-lens-dropdown-options li {\n    min-width: auto;\n  }\n\n  .sprie-config-lens-dropdown-options li .sprie-config-tooltip {\n    position: absolute;\n    width: auto;\n    height: 2rem;\n    flex-shrink: 0;\n    border-radius: 0.125rem;\n    background: #fff;\n    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);\n    text-align: center;\n    line-height: 2rem;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n    display: block;\n\n    /* Font style properties */\n    color: rgba(34, 34, 34, 0.7);\n    font-size: 0.875rem;\n    font-weight: 400;\n    letter-spacing: 0.02813rem;\n    text-transform: uppercase;\n    white-space: nowrap; /* Ensure text is in one line */\n    z-index: 200;\n  }\n\n  .sprie-config-tooltip.sprie-config-top {\n    bottom: 12%;\n  }\n\n  .sprie-config-tooltip.sprie-config-right {\n    right: 2%;\n  }\n}"));
+      elementStyle.appendChild(document.createTextNode("@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap');\n\n#Sprie-config-html,\n#Sprie-config-body {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  font-family: 'Work Sans', sans-serif;\n  box-sizing: border-box;\n}\n\n#Sprie-config-body * {\n  box-sizing: border-box;\n}\n\n.sprie-config-loadingBox {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: 24px;\n  font-weight: 500;\n  z-index: 1000;\n  background: #f2f2f2;\n}\n.my-btn {\n  border: 1px solid gray;\n  border-radius: 5px;\n  padding: 5px 10px;\n  cursor: pointer;\n  transition: all 300ms ease-in;\n}\n\n.my-btn:hover {\n  box-shadow: 0 0 2px 3px gray;\n}\n.my-panel {\n  border: 1px solid gray;\n  padding: 10px 20px;\n  border-radius: 10px;\n  margin: 10px auto;\n}\n\n.my-panel h3 {\n  font-family: sans-serif;\n}\n#Sprie-config-Main-Container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column-reverse;\n  background: #ffffff;\n}\n\n#Sprie-config-Viewer-Container {\n  width: 100%;\n  position: relative;\n  height: 100%;\n}\n\n#Sprie-config-Viewer-Container .sprie-config-webgl {\n  width: 100%;\n  height: 100%;\n}\n\n#Sprie-config-Checkout-Container {\n  width: 100%;\n  padding: 0.75rem;\n  height: min(70%, 45rem);\n}\n\n#Sprie-config-Checkout-box {\n  width: 100%;\n  background: #efefef;\n  padding: 1rem;\n  min-height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n#Sprie-config-Checkout-header {\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  padding-bottom: 0.9rem;\n  border-bottom: 1px solid #ccc;\n  margin-bottom: 2.5rem;\n}\n\n#Sprie-config-Checkout-header #Sprie-config-frameName {\n  color: #222;\n  font-size: 1.375rem;\n  font-weight: 400;\n  line-height: 1.5275rem; /* 111.091% */\n  letter-spacing: -0.05rem;\n  text-transform: uppercase;\n}\n\n#Sprie-config-Checkout-header #Sprie-config-lensPrice {\n  color: #222;\n  font-size: 1.3125rem;\n  font-weight: 400;\n  line-height: 2.275rem; /* 173.333% */\n}\n\n#Sprie-config-Checkout-body {\n  display: flex;\n  flex-direction: column;\n}\n\n#Sprie-config-Dropdown-Container {\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n#Sprie-config-Checkout-button {\n  display: flex;\n  padding: 0rem 1.25rem;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  background: #222;\n  color: #fff;\n  text-align: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 3.5rem; /* 400% */\n  letter-spacing: 0.125rem;\n  text-transform: uppercase;\n  cursor: pointer;\n  margin-top: 6rem;\n}\n\n.sprie-config-loadingFrame {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  fontsize: 24px;\n  font-weight: 500;\n  z-index: 1000;\n  background: #f2f2f2;\n  opacity: 0.8;\n}\n\n.sprie-config-loader {\n  border: 8px solid #f3f3f3; /* Light grey */\n  border-top: 8px solid #222222; /* Blue */\n  border-radius: 50%;\n  width: 60px;\n  height: 60px;\n  animation: spin 1.5s linear infinite;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n/* Breakpoints */\n\n@media (min-width: 800px) {\n  #Sprie-config-Main-Container {\n    flex-direction: row-reverse;\n  }\n\n  #Sprie-config-Checkout-Container {\n    width: auto;\n    padding: 2.5rem;\n    height: 100%;\n  }\n\n  #Sprie-config-Checkout-box {\n    width: 350px;\n    padding: 1.5rem;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  #Sprie-config-Dropdown-Container {\n    gap: 2.5rem;\n  }\n\n  #Sprie-config-Viewer-Container .sprie-config-webgl {\n    height: 99%;\n  }\n}\n\n@media (min-width: 992px) {\n  #Sprie-config-Checkout-box {\n    width: 450px;\n    padding: 2.5rem;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n}\n/* Dropdown.css */\n\n.sprie-config-label {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.02813rem;\n  margin-bottom: 0.5rem;\n  display: flex;\n  align-items: center;\n  margin-left: 0.1rem;\n}\n\n.sprie-config-dropdown-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.sprie-config-select-box {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  /* border: 1px solid #ccc; */\n  border-radius: 5px;\n  position: relative;\n  user-select: none;\n  width: 100%;\n  box-sizing: border-box;\n  transition: border-radius 0.3s ease;\n  padding: 1rem 1.25rem;\n  background-color: #ffffff;\n  max-height: 17rem; /* Set the fixed height for the dropdown */\n  overflow-y: auto;\n}\n\n.sprie-config-select-box.sprie-config-open {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.sprie-config-selected-option {\n  flex: 1;\n}\n\n.sprie-config-arrow {\n  margin-left: 10px;\n  transition: transform 0.3s ease;\n}\n\n.sprie-config-arrow.sprie-config-up {\n  transform: rotate(180deg);\n}\n\n.sprie-config-dropdown-options {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  z-index: 1;\n  background-color: #fff;\n  border-top: 1px solid #ccc;\n  border-radius: 0 0 5px 5px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  opacity: 0;\n  visibility: hidden;\n  overflow: hidden;\n  transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;\n  max-height: 17rem; /* Set the fixed height for the dropdown */\n  overflow-y: auto;\n}\n\n.sprie-config-dropdown-options.sprie-config-open {\n  opacity: 1;\n  visibility: visible;\n  height: auto;\n  z-index: 1000;\n}\n\n.sprie-config-dropdown-options li {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\n.sprie-config-dropdown-options li:hover {\n  background-color: #f0f0f0;\n}\n\n.sprie-config-dropdown-options li.sprie-config-selected {\n  background-color: #f2f2f2; /* Highlight color for selected option */\n}\n\n.sprie-config-selected-option {\n  width: 90%;\n}\n\n.sprie-config-frame-details-wrapper {\n  display: flex;\n  gap: 1rem;\n  height: auto;\n  overflow: hidden;\n}\n\n.sprie-config-variantImgBox {\n  width: 3.4rem;\n  height: 100%;\n  display: flex;\n  align-items: center; /* Center vertically */\n  justify-content: center; /* Center horizontally */\n  background: #fff;\n}\n\n.sprie-config-details {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  overflow: hidden;\n}\n\n.sprie-config-details .sprie-config-frameName {\n  color: #4d4d4d;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem; /* 150% */\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin : 0\n}\n\n.sprie-config-details .sprie-config-skuName {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 0.96125rem; /* 109.857% */\n  letter-spacing: 0.02813rem;\n  text-transform: uppercase;\n  margin : 0\n}\n/* LensDropdown.css */\n\n.sprie-config-label {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.02813rem;\n  margin-bottom: 0.5rem;\n  display: flex;\n  align-items: center;\n  margin-left: 0.1rem;\n}\n\n.sprie-config-dropdown-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.sprie-config-select-box {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 0.125rem;\n  position: relative;\n  user-select: none;\n  width: 100%;\n  box-sizing: border-box;\n  transition: border-radius 0.3s ease;\n  background-color: #ffffff;\n}\n\n.sprie-config-select-box.sprie-config-open {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.sprie-config-selected-lens {\n  flex: 1;\n  display: flex;\n  gap: 1rem;\n  height: auto;\n}\n\n.sprie-config-selected-lens .sprie-config-lens-details {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: auto;\n  padding-bottom: 0.2rem;\n}\n\n.sprie-config-colorBox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sprie-config-lensName {\n  color: #4d4d4d;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem; /* 150% */\n  margin: 0;\n}\n\n.sprie-config-lensColor {\n  color: rgba(34, 34, 34, 0.7);\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 0.96125rem; /* 109.857% */\n  letter-spacing: 0.02813rem;\n  text-transform: uppercase;\n  margin: 0;\n}\n\n.sprie-config-arrow {\n  margin-left: 10px;\n  transition: transform 0.3s ease;\n}\n\n.sprie-config-arrow.sprie-config-up {\n  transform: rotate(180deg);\n}\n\n.sprie-config-lens-dropdown-options {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  z-index: 100; /* Adjust z-index to ensure dropdown options are above other elements */\n  background-color: transparent;\n  border-radius: 0 0 0.125rem 0.125rem;\n  border: 0;\n  box-shadow: none;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.3s ease, visibility 0.3s ease;\n  max-height: 4rem; /* Set the fixed height for the dropdown */\n  overflow-x: auto;\n  overflow-y: hidden;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: no-wrap;\n  padding: 0;\n}\n\n.sprie-config-lens-dropdown-options.sprie-config-open {\n  opacity: 1;\n  visibility: visible;\n}\n\n.sprie-config-lens-dropdown-options li {\n  padding: 1rem 1.25rem;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  padding: 0.25rem;\n}\n\n.sprie-config-lens-dropdown-options li .sprie-config-li-element {\n  width: 100%;\n  height: 100%;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sprie-config-lens-dropdown-options li .sprie-config-tooltip {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  .sprie-config-lens-dropdown-options {\n    max-height: 9.2rem;\n    overflow-x: hidden;\n    overflow-y: auto;\n    display: grid;\n    grid-template-columns: repeat(5, auto);\n    padding: 0.5rem;\n    border-top: 1px solid #ccc;\n    background-color: #fff;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n\n  .sprie-config-lens-dropdown-options li {\n    min-width: auto;\n  }\n\n  .sprie-config-lens-dropdown-options li .sprie-config-tooltip {\n    position: absolute;\n    width: auto;\n    height: 2rem;\n    flex-shrink: 0;\n    border-radius: 0.125rem;\n    background: #fff;\n    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);\n    text-align: center;\n    line-height: 2rem;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n    display: block;\n\n    /* Font style properties */\n    color: rgba(34, 34, 34, 0.7);\n    font-size: 0.875rem;\n    font-weight: 400;\n    letter-spacing: 0.02813rem;\n    text-transform: uppercase;\n    white-space: nowrap; /* Ensure text is in one line */\n    z-index: 200;\n  }\n\n  .sprie-config-tooltip.sprie-config-top {\n    bottom: 12%;\n  }\n\n  .sprie-config-tooltip.sprie-config-right {\n    right: 2%;\n  }\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -111,7 +111,7 @@ var __publicField = (obj, key, value) => {
     host: "https://api.sprie.io"
   };
   const config = Object.freeze(Config$1);
-  const version$1 = "0.1.7201";
+  const version$1 = "0.1.7302";
   function modifyLensArr(arr, element) {
     const index = arr.findIndex((e) => e["sku"] === element["sku"]);
     if (index !== -1) {
@@ -198,17 +198,17 @@ var __publicField = (obj, key, value) => {
         throw new Error("Failed to download model asset.");
       }
     }
-    // async HandleAssetUsage(asset: string) {
-    //   if (!this.fetcher.IsConfigExpired() && asset) {
-    //     const bodyData = {
-    //       org: this.fetcher.config.ORGID,
-    //       asset,
-    //       timestamp: new Date().toISOString(),
-    //     };
-    //     const url = '/v1/analytics/trigger';
-    //      await this.fetcher.Post(url, bodyData);
-    //   }
-    // }
+    async HandleAssetUsage(asset) {
+      if (!this.fetcher.IsConfigExpired() && asset) {
+        const bodyData = {
+          org: this.fetcher.config.ORGID,
+          asset,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        const url = "/v1/analytics/trigger";
+        await this.fetcher.Post(url, bodyData);
+      }
+    }
   }
   const Prefix = "SprieEmbedEvent";
   function EventWrapper(eventName, argValue) {
@@ -223,6 +223,15 @@ var __publicField = (obj, key, value) => {
     FetchingData: () => EventWrapper("FetchingData"),
     EmbedLoaded: () => EventWrapper("EmbedLoaded")
   };
+  var ESDKStatus = /* @__PURE__ */ ((ESDKStatus2) => {
+    ESDKStatus2["Init"] = "init";
+    ESDKStatus2["Preparing"] = "preparing";
+    ESDKStatus2["Authenticating"] = "authenticating";
+    ESDKStatus2["Fetching"] = "fetching";
+    ESDKStatus2["Loading"] = "loading";
+    ESDKStatus2["Done"] = "done";
+    return ESDKStatus2;
+  })(ESDKStatus || {});
   var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
   function getDefaultExportFromCjs(x2) {
     return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
@@ -41434,31 +41443,27 @@ bool bvhIntersectFirstHit(
     positions: { value: positions },
     opacities: { value: opacities }
   };
-  const rgbeLoader = new RGBELoader();
   document.getElementById("gui-container");
-  const gemstoneMaterial = new MeshRefractionMaterial();
+  const diamondMaterial = new MeshRefractionMaterial();
   const BLOOM_SCENE = 1;
   const bloomLayer = new Layers();
   bloomLayer.set(BLOOM_SCENE);
   new MeshBasicMaterial({ color: "black" });
   class CustomRenderer {
+    // lensMaterial:THREE.MeshPhysicalMaterial| any
     constructor(apiService) {
       __publicField(this, "scene");
       __publicField(this, "camera");
       __publicField(this, "renderer");
       __publicField(this, "canvas");
       __publicField(this, "apiService");
-      __publicField(this, "canvasSize");
-      __publicField(this, "isInitialised");
       this.apiService = apiService;
       this.scene = new Scene();
-      this.canvasSize = new Vector2();
-      this.isInitialised = false;
     }
     async intialize() {
+      var _a;
       const newWidth = document.querySelector("canvas.sprie-config-webgl").clientWidth;
       const newHeight = document.querySelector("canvas.sprie-config-webgl").clientHeight;
-      this.canvasSize.set(newWidth, newHeight);
       this.camera = new PerspectiveCamera(
         12,
         newWidth / newHeight,
@@ -41474,6 +41479,7 @@ bool bvhIntersectFirstHit(
       });
       this.renderer.setSize(newWidth, newHeight);
       this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+      const rgbeLoader = new RGBELoader();
       rgbeLoader.load(
         "https://sprie-jarvis-public.s3.eu-west-2.amazonaws.com/environment_desaturated.hdr",
         (environmentMap) => {
@@ -41481,22 +41487,18 @@ bool bvhIntersectFirstHit(
           this.scene.environment = environmentMap;
         }
       );
-      this.isInitialised = true;
-    }
-    initGemstoneDependencies() {
-      var _a;
       rgbeLoader.load(
         "https://sprie-jarvis-public.s3.eu-west-2.amazonaws.com/environment_gemstones.hdr",
         (reflectionMap) => {
           reflectionMap.mapping = EquirectangularReflectionMapping;
-          gemstoneMaterial.uniforms.envMap.value = reflectionMap;
+          diamondMaterial.uniforms.envMap.value = reflectionMap;
           envMap = reflectionMap;
         }
       );
       const aberrationStrength = 0.01;
       const isCubeTexture = (def) => def && def.isCubeTexture;
-      gemstoneMaterial.uniforms.aberrationStrength.value = aberrationStrength;
-      gemstoneMaterial.uniforms.resolution.value = this.canvasSize;
+      diamondMaterial.uniforms.aberrationStrength.value = aberrationStrength;
+      diamondMaterial.uniforms.resolution.value = new Vector2(newWidth, newHeight);
       const temp5 = {};
       const isCubeMap = isCubeTexture(envMap);
       const w2 = (isCubeMap ? (_a = envMap == null ? void 0 : envMap.image[0]) == null ? void 0 : _a.width : envMap == null ? void 0 : envMap.image.width) ?? 1024;
@@ -41512,7 +41514,7 @@ bool bvhIntersectFirstHit(
       temp5.CUBEUV_MAX_MIP = `${_lodMax}.0`;
       temp5.CHROMATIC_ABERRATIONS = "";
       temp5.FAST_CHROMA = "";
-      gemstoneMaterial.defines = temp5;
+      diamondMaterial.defines = temp5;
     }
     cleanUp() {
       if (this.renderer) {
@@ -41530,45 +41532,6 @@ bool bvhIntersectFirstHit(
         });
       });
     }
-    async downloadModel(orgId, assetId) {
-      return await this.apiService.DownloadMA({
-        orgId,
-        assetsId: assetId
-      });
-    }
-    async loadFirstFrame(orgId, frame) {
-      if (frame && orgId) {
-        const apiRes = await this.downloadModel(orgId, frame._id);
-        const specialLens = frame.customisation.length == 0;
-        const includedLens = specialLens ? null : frame.customisation.find((x2) => x2.type == "Lens");
-        await this.renderModel(apiRes.asset.cloudfrontUrl, specialLens, apiRes.decryptionKey).then(() => {
-          if (includedLens) {
-            this.setupLensMaterial(
-              includedLens
-            );
-          }
-        });
-      } else {
-        return;
-      }
-    }
-    async changeFrame(orgId, frame, selectedLens) {
-      if (frame && orgId) {
-        const apiRes = await this.downloadModel(orgId, frame._id);
-        const specialLens = frame.customisation.length == 0;
-        const customLensMaterial = specialLens ? null : frame.customisation.find((x2) => x2.type == "Lens");
-        const renderAsIs = specialLens && selectedLens.sku == "lens-default";
-        await this.renderModel(apiRes.asset.cloudfrontUrl, renderAsIs, apiRes.decryptionKey).then(async () => {
-          if (selectedLens.sku == "lens-default") {
-            if (customLensMaterial) {
-              this.setupLensMaterial(customLensMaterial);
-            }
-          } else {
-            this.setupLensMaterial(selectedLens);
-          }
-        });
-      }
-    }
     async renderModel(modelContent, renderAsIs, decryptionKey) {
       const loader = new GLTFLoader();
       if (modelContent) {
@@ -41716,12 +41679,11 @@ bool bvhIntersectFirstHit(
             }
           }
           if (node.material && node.name === "Diamonds") {
-            this.initGemstoneDependencies();
-            gemstoneMaterial.uniforms.bvh.value = new MeshBVHUniformStruct();
-            gemstoneMaterial.uniforms.bvh.value.updateFrom(
+            diamondMaterial.uniforms.bvh.value = new MeshBVHUniformStruct();
+            diamondMaterial.uniforms.bvh.value.updateFrom(
               new MeshBVH(node.geometry.clone().toNonIndexed(), { strategy: SAH })
             );
-            node.material = gemstoneMaterial;
+            node.material = diamondMaterial;
           }
         }
       });
@@ -41757,6 +41719,206 @@ bool bvhIntersectFirstHit(
       }
       return result == null ? void 0 : result.scene;
     }
+    async setupDropdownAndListeners(response) {
+      const selectDropdown = document.getElementById("Framedropdown");
+      const button = document.getElementById("FramedropdownBtn");
+      const frameContainer = document.getElementById("FrameContainer");
+      const frameElement = document.getElementById("frameName");
+      frameElement.textContent = response.group.name;
+      if (Array.isArray(response.variants)) {
+        response.variants.forEach((frame) => {
+          const option = document.createElement("li");
+          const optionContent = document.createElement("div");
+          optionContent.id = "FrameDetailsContainer";
+          optionContent.classList.add("FramedropdownStyle");
+          optionContent.setAttribute("data-id", frame._id);
+          const wrapper = document.createElement("div");
+          wrapper.classList.add("detalisWrapper");
+          const imageElement = document.createElement("img");
+          imageElement.id = "FramedropdownImg";
+          imageElement.src = frame.variantImage;
+          imageElement.alt = frame.name;
+          const nameElement = document.createElement("div");
+          nameElement.id = "FramedropdownName";
+          nameElement.textContent = frame.name;
+          const skuElement = document.createElement("div");
+          skuElement.id = "FramedropdownDesc";
+          skuElement.textContent = frame.sku;
+          optionContent.appendChild(imageElement);
+          optionContent.appendChild(wrapper);
+          wrapper.appendChild(nameElement);
+          wrapper.appendChild(skuElement);
+          option.appendChild(optionContent);
+          selectDropdown == null ? void 0 : selectDropdown.appendChild(option);
+        });
+      } else {
+        console.error(
+          'The "variants" property is not an array in the JSON data.'
+        );
+      }
+      if (selectDropdown) {
+        selectDropdown.addEventListener("mousedown", async (event) => {
+          if (event.target.matches("div")) {
+            const selectedOption = event.target;
+            selectedOption.style.background = "#f2f2f2";
+            const modelId = selectedOption.getAttribute("data-id");
+            if (modelId) {
+              const modelAsset = await this.apiService.DownloadMA({
+                orgId: this.apiService.fetcher.config.ORGID,
+                assetsId: selectedOption.getAttribute("data-id")
+              });
+              this.renderModel(
+                modelAsset.asset.cloudfrontUrl,
+                true,
+                modelAsset.decryptionKey
+              );
+              frameContainer.innerHTML = selectedOption.innerHTML;
+            }
+          }
+          selectDropdown.style.display = "none";
+        });
+      }
+      button.addEventListener("mousedown", () => {
+        if (selectDropdown.style.display === "block") {
+          selectDropdown.style.display = "none";
+        } else {
+          selectDropdown.style.display = "block";
+        }
+      });
+    }
+    async setupLensDropdownAndListeners(response) {
+      const selectDropdown = document.getElementById("Lensdropdown");
+      const button = document.getElementById("LensdropdownBtn");
+      if (Array.isArray(response.data)) {
+        response.data.forEach((lens) => {
+          if (lens.name != "CLEAR") {
+            const option = document.createElement("li");
+            const optionContent = document.createElement("div");
+            optionContent.id = "LensdetailsContainer";
+            if (lens.direction == "u") {
+              optionContent.setAttribute("data-color", lens.color);
+            } else {
+              optionContent.setAttribute(
+                "data-color",
+                JSON.stringify(lens.gradientColors)
+              );
+            }
+            optionContent.setAttribute("data-direction", lens.direction);
+            optionContent.setAttribute("data-opacity", `${lens.opacity}`);
+            optionContent.setAttribute("data-metalness", `${lens.metalness}`);
+            optionContent.setAttribute("data-finish", lens.finish);
+            optionContent.setAttribute("data-roughness", `${lens.roughness}`);
+            optionContent.setAttribute("data-name", lens.name);
+            optionContent.setAttribute("data-desc", lens.metadata[0].value);
+            optionContent.setAttribute("data-price", `${lens.price}`);
+            optionContent.classList.add("LensdropdownStyle");
+            const wrapper = document.createElement("div");
+            wrapper.classList.add("LensdetalisWrapper");
+            const imageElement = document.createElement("img");
+            imageElement.id = "LensdropdownImg";
+            imageElement.style.background = lens.color;
+            const nameElement = document.createElement("div");
+            nameElement.textContent = lens.name;
+            const skuElement = document.createElement("div");
+            skuElement.textContent = lens.metadata[0].value;
+            optionContent.appendChild(imageElement);
+            optionContent.appendChild(wrapper);
+            wrapper.appendChild(nameElement);
+            wrapper.appendChild(skuElement);
+            option.appendChild(optionContent);
+            selectDropdown == null ? void 0 : selectDropdown.appendChild(option);
+          }
+        });
+      } else {
+        console.error(
+          'The "variants" property is not an array in the JSON data.'
+        );
+      }
+      if (selectDropdown) {
+        selectDropdown.addEventListener("mousedown", async (event) => {
+          if (event.target.matches("div")) {
+            console.log(event.target, event);
+            const selectedOption = event.target;
+            selectedOption.style.background = "#f2f2f2";
+            if (lensMaterial) {
+              if (selectedOption.getAttribute("data-direction") == "u") {
+                lensMaterial.color = new Color(
+                  selectedOption.getAttribute("data-color")
+                );
+                lensMaterial.opacity = selectedOption.getAttribute(
+                  "data-opacity"
+                );
+                gu.uAlpha.value = false;
+                const image = document.getElementById("LensdropdownImgD");
+                image.style.background = selectedOption.getAttribute("data-color");
+              } else if (selectedOption.getAttribute("data-direction") == "tb") {
+                const gradientColors = JSON.parse(
+                  selectedOption.getAttribute("data-color")
+                );
+                gu.uAlpha.value = true;
+                let index = 0;
+                gradientColors.forEach(() => {
+                  gu.colors.value[index] = new Color(
+                    gradientColors[index].color
+                  );
+                  gu.positions.value[index] = gradientColors[index].position;
+                  gu.opacities.value[index] = gradientColors[index].alpha;
+                  index++;
+                });
+              }
+              if (selectedOption.getAttribute("data-finish") == "MIRBLKHMC") {
+                lensMaterial.clearcoat = 1;
+                lensMaterial.clearcoatRoughness = 0;
+              } else if (selectedOption.getAttribute("data-finish") == "HMCCR") {
+                lensMaterial.clearcoat = 0;
+                lensMaterial.clearcoatRoughness = 1;
+              } else if (selectedOption.getAttribute("data-finish") == "MIRSILHMC") {
+                lensMaterial.clearcoat = 1;
+                lensMaterial.clearcoatRoughness = 0;
+              }
+              lensMaterial.roughness = selectedOption.getAttribute(
+                "data-roughness"
+              );
+              lensMaterial.metalness = selectedOption.getAttribute(
+                "data-metalness"
+              );
+              const name = document.getElementById("LensdropdownNameD");
+              name.textContent = selectedOption.getAttribute("data-name");
+              const desc = document.getElementById("LensdropdownSkuD");
+              desc.textContent = selectedOption.getAttribute("data-desc");
+              const priceElement = document.getElementById("lensPrice");
+              priceElement.textContent = "+ $" + selectedOption.getAttribute("data-price") + ".00 USD";
+            }
+          }
+          selectDropdown.style.display = "none";
+        });
+      }
+      button.addEventListener("mousedown", () => {
+        if (selectDropdown.style.display === "block") {
+          selectDropdown.style.display = "none";
+        } else {
+          selectDropdown.style.display = "block";
+        }
+      });
+    }
+    async setupLensDefault(response) {
+      if (lensMaterial) {
+        lensMaterial.color = new Color(response.customisation[0].color);
+        lensMaterial.opacity = response.customisation[0].opacity;
+        lensMaterial.metalness = response.customisation[0].metalness;
+        lensMaterial.roughness = response.customisation[0].roughness;
+        if (response.customisation[0].finish == "MIRBLKHMC") {
+          lensMaterial.clearcoat = 1;
+          lensMaterial.clearcoatRoughness = 0;
+        } else if (response.customisation[0].finish == "HMCCR") {
+          lensMaterial.clearcoat = 0;
+          lensMaterial.clearcoatRoughness = 1;
+        } else if (response.customisation[0].finish == "MIRSILHMC") {
+          lensMaterial.clearcoat = 1;
+          lensMaterial.clearcoatRoughness = 0;
+        }
+      }
+    }
     setupLensMaterial(selectedLens) {
       if (lensMaterial) {
         if (selectedLens.direction == "u") {
@@ -41798,13 +41960,26 @@ bool bvhIntersectFirstHit(
         -0.13425621157020154,
         -0.2564218846390263
       );
-      this.camera.position.set(
-        2.2,
-        2.2,
-        4
-      );
-      controls.minDistance = 1;
-      controls.maxDistance = 5;
+      const rendererSize = this.renderer.getSize(new Vector2());
+      if (rendererSize.x > rendererSize.y) {
+        this.camera.position.set(
+          2.2,
+          2.2,
+          4
+        );
+        controls.minDistance = 2;
+        controls.maxDistance = 7;
+        controls.rotateSpeed = 0.5;
+      } else {
+        this.camera.position.set(
+          4.2,
+          5.2,
+          12
+        );
+        controls.minDistance = 3;
+        controls.maxDistance = 16;
+        controls.rotateSpeed = 0.8;
+      }
       controls.enableDamping = true;
       controls.dampingFactor = 0.2;
       controls.enablePan = true;
@@ -41931,8 +42106,8 @@ bool bvhIntersectFirstHit(
         this.renderer.setRenderTarget(null);
         this.renderer.setClearAlpha(initialClearAlpha);
         this.scene.background = initialBackground;
-        gemstoneMaterial.uniforms.viewMatrixInverse.value = this.camera.matrixWorld;
-        gemstoneMaterial.uniforms.projectionMatrixInverse.value = this.camera.projectionMatrixInverse;
+        diamondMaterial.uniforms.viewMatrixInverse.value = this.camera.matrixWorld;
+        diamondMaterial.uniforms.projectionMatrixInverse.value = this.camera.projectionMatrixInverse;
         requestAnimationFrame(animate);
         composer.render();
       };
@@ -41950,32 +42125,54 @@ bool bvhIntersectFirstHit(
           });
         }
       });
-      this.scene.add(model);
+      const Modelscene = model;
+      this.scene.add(Modelscene);
     }
   }
+  const { warn } = console;
   class SDKServiceFactory {
     constructor({
       log: log2,
       logErr: logErr2,
       apiService,
-      metaData
+      metaData,
+      config: config2
     }) {
       __publicField(this, "log");
       __publicField(this, "logErr");
       __publicField(this, "metaData");
+      __publicField(this, "loaderName");
       __publicField(this, "apiKey");
       __publicField(this, "scriptStreamEncoderId");
+      __publicField(this, "rawNodeList");
+      __publicField(this, "targetNodeList");
+      __publicField(this, "status");
       __publicField(this, "isLoaded");
+      __publicField(this, "loadCount");
+      __publicField(this, "mutationObserver");
+      __publicField(this, "config");
       __publicField(this, "apiService");
-      __publicField(this, "customRenderer");
+      this.config = config2;
       this.apiService = apiService;
       this.metaData = metaData;
       this.apiKey = null;
       this.scriptStreamEncoderId = `sprie-embed🔴${Date.now().toString()}`;
+      this.rawNodeList = document.getElementsByClassName(
+        this.metaData.targetClassName
+      );
+      this.targetNodeList = [];
+      this.status = ESDKStatus.Init;
       this.isLoaded = false;
+      this.loadCount = 0;
+      this.loaderName = "sprie-embed-loader";
       this.log = log2.bind(this);
       this.logErr = logErr2.bind(this);
-      this.customRenderer = new CustomRenderer(apiService);
+      this.mutationObserver = null;
+    }
+    loadMesage() {
+      this.log(
+        `🚀 Loaded SprieEmbed @${this.metaData.appVersion} (${this.config.host.replace(/^https?:\/\//, "").replace(/\/$/, "").replace(".sprie.io", "@sprie")})`
+      );
     }
     /**
      * Scans the current script tag for api key and sets it to this.apiKey
@@ -41997,11 +42194,63 @@ bool bvhIntersectFirstHit(
       }
     }
     /**
-     * Authenticates with Sprie Server with apikey.
+     * Prepares the target node list object (this.targetNodeList) from sprie embed class elements
+     */
+    prepareTargetNodeList() {
+      this.status = ESDKStatus.Preparing;
+      if (!this.apiService.isAuthenticated || !this.apiKey || this.apiService.fetcher.IsConfigExpired()) {
+        throw new Error("Sprie not authenticated");
+      }
+      for (let i = 0; i < this.rawNodeList.length; i += 1) {
+        const targetRawElement = this.rawNodeList[i];
+        const sku = targetRawElement.getAttribute("data-sprie-sku") || targetRawElement.getAttribute("data-sku");
+        const barcode = targetRawElement.getAttribute("data-sprie-barcode");
+        const customClass = targetRawElement.getAttribute("data-class") || "";
+        const styleElement = targetRawElement;
+        styleElement.style.position = "relative";
+        styleElement.style.height = "max-content";
+        const nodeElement = {
+          id: `sprie-embed-${this.apiService.fetcher.config.ORGID}-${barcode || sku}-${Math.ceil(
+            Math.random() * 1e5
+          )}`,
+          htmlNode: targetRawElement,
+          sku,
+          barcode,
+          status: "loading",
+          customClass,
+          customOptions: targetRawElement.getAttribute("data-model-options") || ""
+        };
+        this.targetNodeList.push(nodeElement);
+      }
+    }
+    async loadBySku(sku, classSelector) {
+      if (!sku) {
+        throw new Error("SKU is required");
+      }
+      const loadBySkuSelector = classSelector ? `.${classSelector}` : `.${this.metaData.targetClassName}`;
+      const targetElement = document.querySelector(loadBySkuSelector);
+      if (!targetElement) {
+        throw new Error("Target element not found");
+      }
+      targetElement.setAttribute("data-sprie-sku", sku);
+      await this.fetchData({
+        id: `sprie-embed-${this.apiService.fetcher.config.ORGID}-${sku}-${Math.ceil(
+          Math.random() * 1e5
+        )}`,
+        htmlNode: targetElement,
+        status: "loading",
+        barcode: null,
+        customClass: "",
+        sku
+      });
+    }
+    /**
+     * Authenticates with Spire Server with apikey.
      * @returns {void}
      */
     async authenticate() {
       EventService.AuthLoading({ isLoading: true });
+      this.status = ESDKStatus.Authenticating;
       if (this.apiService.isAuthenticated)
         return;
       if (!this.apiKey) {
@@ -42020,6 +42269,240 @@ bool bvhIntersectFirstHit(
       EventService.AuthLoading({ isLoading: false });
       EventService.AuthDone();
     }
+    async fetchData(elemen) {
+      const newElement = { ...elemen };
+      if (!elemen.barcode && !elemen.sku) {
+        warn(`Pass either "data-sprie-barcode" or "data-spri-sku". Received neither for ${elemen.htmlNode.tagName}`);
+        return null;
+      }
+      try {
+        const assetResult = await this.apiService.FetchAssetBySKUOrBarcode({
+          barcode: elemen.barcode,
+          sku: elemen.sku
+        });
+        if (assetResult && this.apiService.fetcher.config.ORGID) {
+          newElement.status = "loaded";
+          newElement.title = assetResult.name;
+          const modelAsset = await this.apiService.DownloadMA({
+            orgId: this.apiService.fetcher.config.ORGID,
+            assetsId: assetResult._id
+          });
+          const customRenderer2 = new CustomRenderer(this.apiService);
+          if (modelAsset) {
+            customRenderer2.renderModel(modelAsset.asset.cloudfrontUrl, false, modelAsset.decryptionKey);
+            customRenderer2.setupDropdownAndListeners(assetResult);
+            customRenderer2.setupLensDefault(assetResult);
+            const list = await this.apiService.FetchCustomisationList();
+            customRenderer2.setupLensDropdownAndListeners(list);
+          }
+        }
+        if (assetResult == null ? void 0 : assetResult._id) {
+          this.apiService.HandleAssetUsage(assetResult._id);
+        }
+      } catch (err2) {
+        warn("Error fetching or downloading asset:", err2);
+      }
+      return newElement;
+    }
+    /**
+     * Fetches all asset data from targetNodeList and updates it.
+     */
+    async fetchAllData() {
+      this.status = ESDKStatus.Fetching;
+      EventService.FetchingData();
+      this.targetNodeList = await Promise.all(this.targetNodeList.map((x2) => x2 ? this.fetchData(x2) : null));
+    }
+    /**
+     * Add event  listener for all the data nodes data-sku change event.
+     */
+    addTargetNodeChangeListener() {
+      var _a;
+      if (!this.apiService.isAuthenticated || !this.apiKey || this.apiService.fetcher.IsConfigExpired()) {
+        throw new Error("Sprie not authenticated");
+      }
+      const org = this.apiService.fetcher.config.ORGID;
+      const callback = async (mutationList) => {
+        mutationList.forEach(async (mutationRecord) => {
+          if (mutationRecord.type === "attributes" && (mutationRecord.attributeName === "data-sku" || mutationRecord.attributeName === "data-sprie-sku" || mutationRecord.attributeName === "data-sprie-barcode")) {
+            const changedNodeItem = this.targetNodeList.find((item) => (item == null ? void 0 : item.htmlNode) === mutationRecord.target);
+            const htmlTargetDataset = mutationRecord.target.dataset;
+            const changedSku = htmlTargetDataset.sprieSku || htmlTargetDataset.sprieBarcode || htmlTargetDataset.sku;
+            if (changedNodeItem) {
+              changedNodeItem.id = `sprie-embed-${org}-${changedSku}-${Math.ceil(
+                Math.random() * 1e5
+              )}`;
+              if (htmlTargetDataset.sprieSku || htmlTargetDataset.sku) {
+                changedNodeItem.sku = changedSku || "";
+              }
+              if (htmlTargetDataset.sprieBarcode) {
+                changedNodeItem.barcode = changedSku || "";
+              }
+              const changedSKUData = await this.fetchData(changedNodeItem);
+              const iframeElement = changedNodeItem.htmlNode.querySelector("iframe");
+              if (iframeElement && changedSKUData) {
+                const url = changedSKUData.content + this.metaData.previewUrlPrams + changedSKUData.customOptions || "";
+                iframeElement.setAttribute("src", url);
+              }
+            }
+          }
+        });
+      };
+      this.mutationObserver = new MutationObserver(callback);
+      for (let i = 0; i < this.targetNodeList.length; i += 1) {
+        const targetNode = (_a = this.targetNodeList[i]) == null ? void 0 : _a.htmlNode;
+        if (targetNode) {
+          this.mutationObserver.observe(targetNode, {
+            attributes: true,
+            attributeOldValue: true
+            // presever old value.
+          });
+        }
+      }
+    }
+    /**
+    * Mounts new iframe with targetElementNode data
+    */
+    // mountElement() {
+    //     this.status = ESDKStatus.Loading;
+    //     this.targetNodeList.map(async (elemen) => {
+    //         if (!elemen?.content) {
+    //             return;
+    //         }
+    //         const nodeElement: IEmbedTargetNode = elemen;
+    //         const targetContainer: Element = document.createElement('iframe');
+    //         targetContainer.id = nodeElement.id;
+    //         const targetContent = nodeElement.content
+    //             + this.metaData.previewUrlPrams
+    //             + nodeElement.customOptions || '';
+    //         targetContainer.setAttribute('title', nodeElement.title || '');
+    //         targetContainer.setAttribute('frameborder', '0');
+    //         targetContainer.setAttribute('marginheight', '0');
+    //         targetContainer.setAttribute('marginwidth', '0');
+    //         targetContainer.setAttribute('marginheight', '0');
+    //         if (nodeElement.customClass) {
+    //             targetContainer.classList.add(nodeElement.customClass);
+    //         }
+    //         targetContainer.setAttribute('src', targetContent);
+    //         nodeElement.htmlNode.appendChild(targetContainer);
+    //         this.loadCount += 1;
+    //     });
+    //     EventService.EmbedLoaded();
+    // }
+    mountElement() {
+      this.status = ESDKStatus.Loading;
+      this.targetNodeList.map(async (elemen) => {
+        if (!(elemen == null ? void 0 : elemen.content)) {
+          return;
+        }
+        const nodeElement = elemen;
+        const targetContainer = document.createElement("iframe");
+        targetContainer.id = nodeElement.id;
+        const targetContent = nodeElement.content + this.metaData.previewUrlPrams + nodeElement.customOptions || "";
+        targetContainer.setAttribute("title", nodeElement.title || "");
+        targetContainer.setAttribute("frameborder", "0");
+        targetContainer.setAttribute("marginheight", "0");
+        targetContainer.setAttribute("marginwidth", "0");
+        targetContainer.setAttribute("marginheight", "0");
+        if (nodeElement.customClass) {
+          targetContainer.classList.add(nodeElement.customClass);
+        }
+        targetContainer.setAttribute("src", targetContent);
+        nodeElement.htmlNode.appendChild(targetContainer);
+        this.loadCount += 1;
+      });
+      EventService.EmbedLoaded();
+    }
+    Unmount() {
+      if (this.targetNodeList.length === 0) {
+        this.logErr("No targetNode found! Nothing to Unmount.");
+      }
+      this.targetNodeList.forEach((elem) => {
+        if (elem && elem.htmlNode) {
+          const eh = elem.htmlNode;
+          eh.textContent = "";
+        }
+      });
+      this.isLoaded = false;
+      this.targetNodeList = [];
+      if (this.mutationObserver) {
+        this.mutationObserver.disconnect();
+      }
+    }
+    showLoader() {
+      this.targetNodeList.map(async (elemen) => {
+        if (!(elemen == null ? void 0 : elemen.content)) {
+          return;
+        }
+        const nodeElement = elemen;
+        const divContainer = document.createElement("div");
+        divContainer.setAttribute("class", this.loaderName);
+        divContainer.style.position = "absolute";
+        divContainer.style.boxSizing = "border-box";
+        divContainer.style.width = "100%";
+        divContainer.style.display = "flex";
+        divContainer.style.height = "100%";
+        divContainer.style.backgroundColor = "#00000032";
+        divContainer.style.zIndex = "9998";
+        divContainer.style.justifyContent = "center";
+        divContainer.style.accentColor = "center";
+        divContainer.style.left = "0";
+        divContainer.style.top = "0";
+        divContainer.style.backdropFilter = "blur(6px)";
+        const div = document.createElement("div");
+        div.style.position = "relative";
+        div.style.left = "-9999px";
+        div.style.top = "45%";
+        div.style.zIndex = "9999";
+        div.style.height = "15px";
+        div.style.width = "15px";
+        div.style.color = "white";
+        div.style.boxShadow = "9974px 0 0 0 #303045, 9999px 0 0 0 #303045, 10024px 0 0 0 #303045";
+        div.style.borderRadius = "8px";
+        div.style.animation = " dotTyping 1s infinite linear";
+        div.animate(
+          [
+            {
+              boxShadow: "9974px 0 0 0 #303045, 9999px 0 0 0 #303045, 10024px 0 0 0 #303045"
+            },
+            {
+              boxShadow: "9974px -10px 0 0 #303045, 9999px 0 0 0 #303045, 10024px 0 0 0 #303045"
+            },
+            {
+              boxShadow: "9974px 0 0 0 #303045, 9999px 0 0 0 #303045, 10024px 0 0 0 #303045"
+            },
+            {
+              boxShadow: "9974px 0 0 0 #303045, 9999px -10px 0 0 #303045, 10024px 0 0 0 #303045"
+            },
+            {
+              boxShadow: "9974px 0 0 0 #303045, 9999px 0 0 0 #303045, 10024px 0 0 0 #303045"
+            },
+            {
+              boxShadow: "9974px 0 0 0 #303045, 9999px 0 0 0 #303045, 10024px -10px 0 0 #303045"
+            },
+            {
+              boxShadow: "9974px 0 0 0 #303045, 9999px 0 0 0 #303045, 10024px 0 0 0 #303045"
+            }
+          ],
+          {
+            duration: 1e3,
+            iterations: Infinity
+          }
+        );
+        divContainer.appendChild(div);
+        nodeElement == null ? void 0 : nodeElement.htmlNode.appendChild(divContainer);
+      });
+    }
+    hideLoader() {
+      const elms = document.querySelectorAll(`[class='${this.loaderName}']`);
+      let counter = 0;
+      while (counter <= elms.length) {
+        const elem = elms[counter];
+        if (elem) {
+          elms[counter].style.display = "none";
+        }
+        counter += 1;
+      }
+    }
     /**
      * Main entry point for SprieEmbed
      * @returns {boolean} true if success, false if error
@@ -42028,7 +42511,18 @@ bool bvhIntersectFirstHit(
       try {
         this.scanApiKeyFromCurrentScriptTag();
         await this.authenticate();
+        this.prepareTargetNodeList();
+        this.addTargetNodeChangeListener();
+        await this.fetchAllData();
+        this.showLoader();
+        await this.mountElement();
+        this.status = ESDKStatus.Done;
         this.isLoaded = true;
+        if (this.isLoaded) {
+          setTimeout(() => {
+            this.hideLoader();
+          }, 1800);
+        }
         return true;
       } catch (e) {
         this.log("SprieEmbed Loading failed.");
@@ -42372,6 +42866,8 @@ bool bvhIntersectFirstHit(
   }
   var jsxRuntimeExports = jsxRuntime.exports;
   const App$1 = "";
+  const Button = "";
+  const Panel = "";
   const MainContainer$1 = "";
   const FrameDropdown$1 = "";
   const dropdownIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDlMMTIuNzgwOSAxNC4zMzA2QzEyLjMzMTYgMTQuNzE1OCAxMS42Njg0IDE0LjcxNTggMTEuMjE5MSAxNC4zMzA2TDUgOSIgc3Ryb2tlPSIjNEQ0RDREIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=";
@@ -42594,29 +43090,34 @@ bool bvhIntersectFirstHit(
   async function changeCustomRenderer({
     orgId,
     apiService,
-    sdkService,
     frameList,
     setLoading
   }) {
-    customRenderer = sdkService.customRenderer;
-    if (!customRenderer.isInitialised) {
-      customRenderer.intialize();
-      customRenderer.setupAndRenderScene();
-    }
+    customRenderer = new CustomRenderer(apiService);
+    customRenderer.intialize();
+    customRenderer.setupAndRenderScene();
     setLoading(true);
     const frame = frameList[0];
-    customRenderer.loadFirstFrame(orgId, frame).then(
-      () => {
-        currentFrame = frame;
-        setLoading(false);
+    const apiRes = await apiService.DownloadMA({
+      orgId,
+      assetsId: frame._id
+    });
+    hasSpecialDefaultLens = frame.customisation.length == 0;
+    const includedLens = hasSpecialDefaultLens ? null : frame.customisation.find((x2) => x2.type == "Lens");
+    customRenderer.renderModel(apiRes.asset.cloudfrontUrl, hasSpecialDefaultLens, apiRes.decryptionKey).then(() => {
+      if (includedLens) {
+        customRenderer.setupLensMaterial(
+          includedLens
+        );
       }
-    );
+      currentFrame = frame;
+      setLoading(false);
+    });
   }
   function MainContainer({
-    frameName,
+    orgName,
     customEvent,
     apiService,
-    sdkService,
     frameList,
     lensList,
     viewerOnly
@@ -42633,7 +43134,25 @@ bool bvhIntersectFirstHit(
         (async () => {
           if (selectedLens) {
             setModelLoading(true);
-            await customRenderer.changeFrame(orgId, frame, selectedLens).then(() => {
+            const apiRes = await apiService.DownloadMA({
+              orgId,
+              assetsId: frame._id
+            });
+            hasSpecialDefaultLens = frame.customisation.length == 0;
+            const includedLens = hasSpecialDefaultLens ? null : frame.customisation.find((x2) => x2.type == "Lens");
+            const renderAsIs = hasSpecialDefaultLens && selectedLens.sku == "lens-default";
+            customRenderer.renderModel(apiRes.asset.cloudfrontUrl, renderAsIs, apiRes.decryptionKey).then(async () => {
+              if (selectedLens.sku == "lens-default") {
+                if (includedLens) {
+                  customRenderer.setupLensMaterial(
+                    includedLens
+                  );
+                }
+              } else {
+                customRenderer.setupLensMaterial(
+                  selectedLens
+                );
+              }
               currentFrame = frame;
               setModelLoading(false);
             });
@@ -42689,7 +43208,6 @@ bool bvhIntersectFirstHit(
       if (apiService && frameList && orgId) {
         changeCustomRenderer({
           apiService,
-          sdkService,
           frameList,
           orgId,
           setLoading: setModelLoading
@@ -42703,7 +43221,7 @@ bool bvhIntersectFirstHit(
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Main-Container", children: [
       !viewerOnly && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-Checkout-Container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Checkout-box", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Checkout-header", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-frameName", children: frameName }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-frameName", children: orgName }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-lensPrice", children: `${(selectedLens == null ? void 0 : selectedLens.price) ? `+ $${selectedLens == null ? void 0 : selectedLens.price}.00 USD` : ""}` })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Checkout-body", children: [
@@ -42796,11 +43314,11 @@ bool bvhIntersectFirstHit(
       ] })
     ] });
   }
-  function App({ apiService, sdkService, sku, events: events2, viewerOnly = false }) {
+  function App({ apiService, sku, events: events2, viewerOnly = false }) {
     const [settings, setSettings] = reactExports.useState(null);
     const frameList = (settings == null ? void 0 : settings.frameList) || null;
     const lensList = (settings == null ? void 0 : settings.lensList) || null;
-    const frameName = (settings == null ? void 0 : settings.frameName) || "";
+    const orgName = (settings == null ? void 0 : settings.orgName) || "";
     reactExports.useEffect(() => {
       (async () => {
         const apiRes = await apiService.FetchAssetBySKUOrBarcode({
@@ -42811,7 +43329,7 @@ bool bvhIntersectFirstHit(
         setSettings({
           frameList: apiRes == null ? void 0 : apiRes.variants,
           lensList: lensApiRes == null ? void 0 : lensApiRes.data,
-          frameName: apiRes == null ? void 0 : apiRes.group.name
+          orgName: apiRes == null ? void 0 : apiRes.group.name
         });
       })();
     }, [apiService, sku]);
@@ -42821,9 +43339,8 @@ bool bvhIntersectFirstHit(
         MainContainer,
         {
           customEvent: events2,
-          frameName,
+          orgName,
           apiService,
-          sdkService,
           frameList,
           lensList,
           viewerOnly
@@ -50077,16 +50594,13 @@ bool bvhIntersectFirstHit(
   class UIService {
     constructor({
       apiService,
-      sdkService,
       events: events2
     }) {
       __publicField(this, "targetElement");
       __publicField(this, "apiService");
-      __publicField(this, "sdkService");
       __publicField(this, "events");
       __publicField(this, "htmlTarget");
       this.apiService = apiService;
-      this.sdkService = sdkService;
       this.events = events2;
     }
     mount(sku, options) {
@@ -50102,7 +50616,6 @@ bool bvhIntersectFirstHit(
       }
       this.targetElement.render(React.createElement(App, {
         apiService: this.apiService,
-        sdkService: this.sdkService,
         events: this.events,
         sku,
         viewerOnly: options.viewerOnly
@@ -50502,6 +51015,7 @@ bool bvhIntersectFirstHit(
   const logErr = (...data) => {
     error("❌ Sprie Error:", ...data);
   };
+  const previewUrlPrams = "&ui_animations=0&ui_infos=0&ui_stop=0&ui_inspector=0&ui_watermark_link=0&ui_watermark=0&ui_ar=0&ui_help=0&ui_settings=0&ui_vr=0&ui_fullscreen=0&ui_annotations=0&ui_start=0&";
   const fetcherConfig = {
     HOST: config.host,
     STORE_PREFIX: config.storePrefix
@@ -50514,21 +51028,23 @@ bool bvhIntersectFirstHit(
       __publicField(this, "events");
       this.events = new CustomEventEmitter();
       this.apiService = new APIServiceFactory(new FetcherServiceFactory(fetcherConfig));
+      this.uiService = new UIService({
+        apiService: this.apiService,
+        events: this.events
+      });
       const sdkProps = {
         apiService: this.apiService,
+        config,
         log,
         logErr,
         metaData: {
-          appVersion: version$1
+          appVersion: version$1,
+          previewUrlPrams,
+          targetClassName: "sprie-embed-element"
         }
       };
       this.sdkService = new SDKServiceFactory(sdkProps);
       this.sdkService.Init();
-      this.uiService = new UIService({
-        apiService: this.apiService,
-        sdkService: this.sdkService,
-        events: this.events
-      });
     }
     load(sku, customId) {
       this.uiService.unmount();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perceptimagery/dita-configurator-staging",
-  "version": "0.1.7201",
+  "version": "0.1.7302",
   "author": "Rohan Satpute <rohan@perceptimagery.com>",
   "license": "UNLICENSED",
   "main": "dist/index.js",