@perceptimagery/dita-configurator-staging 0.1.7101 → 0.1.7201

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.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}"));
+      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}"));
       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.7101";
+  const version$1 = "0.1.7201";
   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) {
-      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);
-      }
-    }
+    // 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);
+    //   }
+    // }
   }
   const Prefix = "SprieEmbedEvent";
   function EventWrapper(eventName, argValue) {
@@ -223,15 +223,6 @@ 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;
@@ -41443,27 +41434,31 @@ bool bvhIntersectFirstHit(
     positions: { value: positions },
     opacities: { value: opacities }
   };
+  const rgbeLoader = new RGBELoader();
   document.getElementById("gui-container");
-  const diamondMaterial = new MeshRefractionMaterial();
+  const gemstoneMaterial = 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,
@@ -41479,7 +41474,6 @@ 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) => {
@@ -41487,18 +41481,22 @@ 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;
-          diamondMaterial.uniforms.envMap.value = reflectionMap;
+          gemstoneMaterial.uniforms.envMap.value = reflectionMap;
           envMap = reflectionMap;
         }
       );
       const aberrationStrength = 0.01;
       const isCubeTexture = (def) => def && def.isCubeTexture;
-      diamondMaterial.uniforms.aberrationStrength.value = aberrationStrength;
-      diamondMaterial.uniforms.resolution.value = new Vector2(newWidth, newHeight);
+      gemstoneMaterial.uniforms.aberrationStrength.value = aberrationStrength;
+      gemstoneMaterial.uniforms.resolution.value = this.canvasSize;
       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;
@@ -41514,7 +41512,7 @@ bool bvhIntersectFirstHit(
       temp5.CUBEUV_MAX_MIP = `${_lodMax}.0`;
       temp5.CHROMATIC_ABERRATIONS = "";
       temp5.FAST_CHROMA = "";
-      diamondMaterial.defines = temp5;
+      gemstoneMaterial.defines = temp5;
     }
     cleanUp() {
       if (this.renderer) {
@@ -41532,6 +41530,45 @@ 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) {
@@ -41679,11 +41716,12 @@ bool bvhIntersectFirstHit(
             }
           }
           if (node.material && node.name === "Diamonds") {
-            diamondMaterial.uniforms.bvh.value = new MeshBVHUniformStruct();
-            diamondMaterial.uniforms.bvh.value.updateFrom(
+            this.initGemstoneDependencies();
+            gemstoneMaterial.uniforms.bvh.value = new MeshBVHUniformStruct();
+            gemstoneMaterial.uniforms.bvh.value.updateFrom(
               new MeshBVH(node.geometry.clone().toNonIndexed(), { strategy: SAH })
             );
-            node.material = diamondMaterial;
+            node.material = gemstoneMaterial;
           }
         }
       });
@@ -41719,206 +41757,6 @@ 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") {
@@ -42093,8 +41931,8 @@ bool bvhIntersectFirstHit(
         this.renderer.setRenderTarget(null);
         this.renderer.setClearAlpha(initialClearAlpha);
         this.scene.background = initialBackground;
-        diamondMaterial.uniforms.viewMatrixInverse.value = this.camera.matrixWorld;
-        diamondMaterial.uniforms.projectionMatrixInverse.value = this.camera.projectionMatrixInverse;
+        gemstoneMaterial.uniforms.viewMatrixInverse.value = this.camera.matrixWorld;
+        gemstoneMaterial.uniforms.projectionMatrixInverse.value = this.camera.projectionMatrixInverse;
         requestAnimationFrame(animate);
         composer.render();
       };
@@ -42112,54 +41950,32 @@ bool bvhIntersectFirstHit(
           });
         }
       });
-      const Modelscene = model;
-      this.scene.add(Modelscene);
+      this.scene.add(model);
     }
   }
-  const { warn } = console;
   class SDKServiceFactory {
     constructor({
       log: log2,
       logErr: logErr2,
       apiService,
-      metaData,
-      config: config2
+      metaData
     }) {
       __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");
-      this.config = config2;
+      __publicField(this, "customRenderer");
       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.mutationObserver = null;
-    }
-    loadMesage() {
-      this.log(
-        `🚀 Loaded SprieEmbed @${this.metaData.appVersion} (${this.config.host.replace(/^https?:\/\//, "").replace(/\/$/, "").replace(".sprie.io", "@sprie")})`
-      );
+      this.customRenderer = new CustomRenderer(apiService);
     }
     /**
      * Scans the current script tag for api key and sets it to this.apiKey
@@ -42181,63 +41997,11 @@ bool bvhIntersectFirstHit(
       }
     }
     /**
-     * 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.
+     * Authenticates with Sprie Server with apikey.
      * @returns {void}
      */
     async authenticate() {
       EventService.AuthLoading({ isLoading: true });
-      this.status = ESDKStatus.Authenticating;
       if (this.apiService.isAuthenticated)
         return;
       if (!this.apiKey) {
@@ -42256,240 +42020,6 @@ 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
@@ -42498,18 +42028,7 @@ 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.");
@@ -42853,8 +42372,6 @@ 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=";
@@ -43077,34 +42594,29 @@ bool bvhIntersectFirstHit(
   async function changeCustomRenderer({
     orgId,
     apiService,
+    sdkService,
     frameList,
     setLoading
   }) {
-    customRenderer = new CustomRenderer(apiService);
-    customRenderer.intialize();
-    customRenderer.setupAndRenderScene();
+    customRenderer = sdkService.customRenderer;
+    if (!customRenderer.isInitialised) {
+      customRenderer.intialize();
+      customRenderer.setupAndRenderScene();
+    }
     setLoading(true);
     const frame = frameList[0];
-    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
-        );
+    customRenderer.loadFirstFrame(orgId, frame).then(
+      () => {
+        currentFrame = frame;
+        setLoading(false);
       }
-      currentFrame = frame;
-      setLoading(false);
-    });
+    );
   }
   function MainContainer({
-    orgName,
+    frameName,
     customEvent,
     apiService,
+    sdkService,
     frameList,
     lensList,
     viewerOnly
@@ -43121,25 +42633,7 @@ bool bvhIntersectFirstHit(
         (async () => {
           if (selectedLens) {
             setModelLoading(true);
-            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
-                );
-              }
+            await customRenderer.changeFrame(orgId, frame, selectedLens).then(() => {
               currentFrame = frame;
               setModelLoading(false);
             });
@@ -43195,6 +42689,7 @@ bool bvhIntersectFirstHit(
       if (apiService && frameList && orgId) {
         changeCustomRenderer({
           apiService,
+          sdkService,
           frameList,
           orgId,
           setLoading: setModelLoading
@@ -43208,7 +42703,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: orgName }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "Sprie-config-frameName", children: frameName }),
           /* @__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: [
@@ -43301,11 +42796,11 @@ bool bvhIntersectFirstHit(
       ] })
     ] });
   }
-  function App({ apiService, sku, events: events2, viewerOnly = false }) {
+  function App({ apiService, sdkService, 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 orgName = (settings == null ? void 0 : settings.orgName) || "";
+    const frameName = (settings == null ? void 0 : settings.frameName) || "";
     reactExports.useEffect(() => {
       (async () => {
         const apiRes = await apiService.FetchAssetBySKUOrBarcode({
@@ -43316,7 +42811,7 @@ bool bvhIntersectFirstHit(
         setSettings({
           frameList: apiRes == null ? void 0 : apiRes.variants,
           lensList: lensApiRes == null ? void 0 : lensApiRes.data,
-          orgName: apiRes == null ? void 0 : apiRes.group.name
+          frameName: apiRes == null ? void 0 : apiRes.group.name
         });
       })();
     }, [apiService, sku]);
@@ -43326,8 +42821,9 @@ bool bvhIntersectFirstHit(
         MainContainer,
         {
           customEvent: events2,
-          orgName,
+          frameName,
           apiService,
+          sdkService,
           frameList,
           lensList,
           viewerOnly
@@ -50581,13 +50077,16 @@ 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) {
@@ -50603,6 +50102,7 @@ bool bvhIntersectFirstHit(
       }
       this.targetElement.render(React.createElement(App, {
         apiService: this.apiService,
+        sdkService: this.sdkService,
         events: this.events,
         sku,
         viewerOnly: options.viewerOnly
@@ -51002,7 +50502,6 @@ 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
@@ -51015,23 +50514,21 @@ 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,
-          previewUrlPrams,
-          targetClassName: "sprie-embed-element"
+          appVersion: version$1
         }
       };
       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.7101",
+  "version": "0.1.7201",
   "author": "Rohan Satpute <rohan@perceptimagery.com>",
   "license": "UNLICENSED",
   "main": "dist/index.js",