npm - @perceptimagery/dita-configurator-staging - Versions diffs - 0.2.1311 → 0.3.1 - Mend

@perceptimagery/dita-configurator-staging 0.2.1311 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/index.js +1147 -841
package/package.json +2 -2

package/dist/index.js CHANGED Viewed

@@ -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#holder-canvas > canvas {\n  width: 100%;\n  height: 100%;\n}\n\n#Sprie-config-Checkout-Container {\n  width: 100%;\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@media (max-width : 576px) {\n\n  #Sprie-config-Viewer-Container {\n    width: 100%;\n    height: min(30%, 20rem);\n  }\n\n  #Sprie-config-Viewer-Container .sprie-config-webgl {\n    height: 99%;\n  }\n\n}\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  margin: 0;\n  padding: 0;\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: 10000;\n  background: #f2f2f2;\n}\n/*== MAIN_CONTAINER ==*/\n#Sprie-config-Main-Container {\n  width: 100%;\n  height: 100%;\n}\n\n/*== HEADER ==*/\n#Sprie-config-Header {\n  height: 5rem; /* 88px */\n  border-bottom: 1.5px solid #aeaeae;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 0.5rem;\n  .sprie-config-Header-groupName {\n    color: #373737;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5275rem; /* 111.091% */\n    letter-spacing: -0.05rem;\n    text-transform: uppercase;\n  }\n}\n\n/*== 3D_VIEWER ==*/\n#Sprie-config-Viewer-Container {\n  position: relative;\n  width: 100%;\n\n  img {\n    position: absolute;\n    top: 2rem;\n    left: 2rem;\n  }\n}\n\n/*= 3D_VIEWER-LOADER =*/\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  font-size: 24px;\n  font-weight: 500;\n  z-index: 1000;\n  background: #fafafa;\n  opacity: 0.7;\n}\n\n.sprie-config-loader {\n  border: 8px solid #222222;\n  width: 60px;\n  padding: 8px;\n  aspect-ratio: 1;\n  border-radius: 50%;\n  background: #222222;\n  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;\n  -webkit-mask: var(--_m);\n  mask: var(--_m);\n  -webkit-mask-composite: source-out;\n  mask-composite: subtract;\n  animation: spin 1s infinite linear;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n/*== CUSTOMISATION_BLOCK ==*/\n#Sprie-config-Customisation-block {\n  height: 15rem; /* 240px */\n  background-color: #f2f2f2;\n  border-top: 1px solid #91847e;\n  position: relative;\n  flex-grow: 1;\n}\n\n.sprie-config-price-block {\n  position: absolute;\n  right: 0;\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: 0.4rem;\n  p {\n    font-size: 1.25rem;\n    font-weight: 500;\n    color: #121212;\n  }\n}\n\n.frameName {\n  color: #4d4d4d;\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1.5275rem; /* 111.091% */\n  letter-spacing: -0.05rem;\n  text-transform: uppercase;\n}\n\n.price-tag {\n  color: #222;\n  font-size: 1.3125rem;\n  font-weight: 400;\n  line-height: 2.275rem; /* 173.333% */\n}\n\n/*=== Mobile_View ===*/\n@media (max-width: 576px) {\n  /* HEADER */\n  #Sprie-config-Header {\n    height: 5.25rem; /* 84px */\n  }\n\n  #Sprie-config-Viewer-Container {\n    img {\n      position: absolute;\n      top: 1.2rem;\n      left: 1.2rem;\n    }\n  }\n}\n.sprie-config-palette {\n  display: flex;\n  gap: 1.5rem;\n  justify-content: flex-start;\n  overflow-x: auto;\n}\n\n.sprie-config-palette-img-box {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.sprie-config-palette-img-box > button {\n  background-color: transparent;\n}\n\n.sprie-config-palette-img-text {\n  position: absolute;\n  z-index: 100;\n  bottom: -12px;\n\n  .sprie-config-palette-imgName {\n    white-space: nowrap;\n    z-index: 100;\n  }\n}\n.sprie-config-engraving-block {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.8rem;\n}\n\n.sprie-config-engraving-checkbox[type='checkbox'] {\n  width: 1rem;\n  height: 1rem;\n  accent-color: #000;\n  border: 0.25rem solid #000;\n  border-radius: 0.5rem;\n  background-color: transparent;\n}\n\n.sprie-config-engraving-inputField-block {\n  width: 25rem;\n  position: relative;\n}\n\n.sprie-config-engraving-inputField {\n  width: 100%;\n  font-size: 0.8rem;\n  font-weight: 500;\n  background: transparent;\n  border-width: 1px;\n}\n\n.sprie-config-engraving-inputInfo {\n  position: absolute;\n  white-space: nowrap;\n  font-size: 0.6rem;\n  bottom: 0.2rem;\n  right: 0.4rem;\n  color: #686868;\n}\n\n.sprie-config-engraving-link {\n  position: absolute;\n  white-space: nowrap;\n  font-size: 0.7rem;\n  bottom: -1.2rem;\n  right: 0;\n  color: #686868;\n  text-decoration: underline;\n}\n\n@media (max-width: 576px) {\n  .sprie-config-engraving-inputField-block {\n    width: 70%;\n  }\n}\n.carousel {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.carousel-container {\n  width: 80%;\n  display: flex;\n  position: relative;\n  overflow: hidden;\n}\n\n.carousel-item {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 100%;\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-duration: 500ms;\n}\n\n.carousel-header {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 2rem;\n\n  .step-syntax {\n    font-size: 1rem;\n    font-weight: 600;\n    line-height: 1.5rem;\n    color: #4d4d4d;\n  }\n\n  .select-syntax {\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n    color: #91847e;\n  }\n}\n\n/* Arrow-btns */\n.carousel-btn {\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background-color: transparent;\n}\n.arrow {\n  border: solid #91847e;\n  border-width: 0 3px 3px 0;\n  display: inline-block;\n}\n\n.right-arrow {\n  transform: rotate(-45deg);\n  -webkit-transform: rotate(-45deg);\n}\n\n.left-arrow {\n  transform: rotate(135deg);\n  -webkit-transform: rotate(135deg);\n}\n\n/* Step-tracker */\n\n.step-tracker-block {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-bottom: 1px solid #aeaeae;\n  width: 26.25rem;\n}\n\n.step-tracker {\n  display: flex;\n  gap: 1rem;\n}\n\n.step-circle {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  border: 1px solid #7d7d7d;\n  background-color: transparent;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: 10px;\n  font-size: 14px;\n}\n\n.step-circle.active {\n  background-color: #000; /* Change color for active step */\n  border-color: #000;\n}\n\n@media (max-width: 576px) {\n  .carousel-container {\n    width: 100%;\n  }\n\n  .step-tracker-block {\n    width: 80%;\n  }\n}\n.sprie-config-add-to-cart-block {\n  width: 14.5rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 0.5rem;\n}\n.sprie-config-add-to-cart-btn {\n  width: 100%;\n  height: 2.75rem; /* 44px */\n  background-color: #000000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: 0;\n\n  font-size: 0.875rem;\n  letter-spacing: 0.1rem;\n  font-weight: 500;\n  color: #ffffff;\n}\n\n#Sprie-Config-return-policy-label {\n  display: flex;\n  justify-content: center;\n  width: 13.5rem;\n\n  p {\n    font-size: 0.7rem;\n    text-align: end;\n    margin-top: 0.05rem;\n  }\n}\n#Sprie-Config-return-policy-checkbox[type='checkbox'] {\n  width: 1rem;\n  height: 1rem;\n  accent-color: #000;\n  border: 0.25rem solid #000;\n  border-radius: 0.5rem;\n  background-color: transparent;\n}\n\n.sprie-config-add-to-cart-btn:disabled,\n.sprie-config-add-to-cart-btn [disabled] {\n  /* border: 1px solid #999999; */\n  background-color: rgb(80, 79, 79);\n  cursor: default;\n}\n@media (max-width: 576px) {\n  .sprie-config-add-to-cart-block {\n    width: 100%;\n  }\n\n  .sprie-config-add-to-cart-btn {\n    width: 100%;\n    height: 4rem; /* 64px */\n  }\n\n  #Sprie-Config-return-policy-label {\n    width: 100%;\n    gap : .5rem;\n  }\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -112,11 +112,11 @@ var __publicField = (obj, key, value) => {
     host: "https://api.sprie.io"
   };
   const config$1 = Object.freeze(Config$2);
-  const version$1 = "0.2.1311";
+  const version$1 = "0.3.0001";
   function modifyLensArr$1(arr, element) {
-    const index = arr.findIndex((e) => e["sku"] === element["sku"]);
-    if (index !== -1) {
-      return [element, ...arr.slice(0, index), ...arr.slice(index + 1)];
+    const index2 = arr.findIndex((e) => e["sku"] === element["sku"]);
+    if (index2 !== -1) {
+      return [element, ...arr.slice(0, index2), ...arr.slice(index2 + 1)];
     }
     return arr;
   }
@@ -178,13 +178,13 @@ var __publicField = (obj, key, value) => {
       return response;
     }
     // Lens-list call
-    async FetchCustomisationList() {
-      const url = `/v1/widget/list-customisation?search=type:Lens,usage:customizer&limit=50`;
+    async FetchCustomisationList(type) {
+      const url = `/v1/widget/list-customisation?search=type:${type},org:${this.fetcher.config.ORGID},usage:customizer&limit=50`;
       const response = await this.fetcher.Get(url);
-      const defaultLensData = response.data.find((e) => e.sku === "lens-default");
+      const defaultCustomisationData = response.data.find((e) => e.sku === `${type.toLowerCase()}-default`);
       const modifiedRes = {
         ...response,
-        data: modifyLensArr$1(response.data, defaultLensData)
+        data: modifyLensArr$1(response.data, defaultCustomisationData)
       };
       return modifiedRes;
     }
@@ -213,16 +213,6 @@ var __publicField = (obj, key, value) => {
       }
     }
     async HandleShopifyAddToCart(items) {
-      items.forEach((ele) => {
-        var _a2;
-        const text = (_a2 = ele.properties) == null ? void 0 : _a2.customText;
-        if (text) {
-          delete ele.properties["customText"];
-          Object.assign(ele.properties, { "custom-laser-etching": "Add Laser Engraving" });
-          Object.assign(ele.properties, { "custom-text": text });
-          Object.assign(ele.properties, { "This customized item cannot be returned or exchanged": "I agree" });
-        }
-      });
       let formData = {
         "items": items,
         "sections": "mini-cart"
@@ -681,424 +671,6 @@ var __publicField = (obj, key, value) => {
   }
   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=";
-  function FrameDropdown({
-    label,
-    options,
-    selectedFrame,
-    changeFrame
-  }) {
-    const [isOpen, setIsOpen] = reactExports.useState(false);
-    const dropdownRef = reactExports.useRef(null);
-    const handleToggleDropdown = () => {
-      setIsOpen((prevIsOpen) => !prevIsOpen);
-    };
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-    const handleSelectOption = (option) => {
-      changeFrame(option);
-      setIsOpen(false);
-    };
-    reactExports.useEffect(() => {
-      document.addEventListener("click", handleClickOutside);
-      return () => {
-        document.removeEventListener("click", handleClickOutside);
-      };
-    }, []);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sprie-config-dropdown-wrapper`, ref: dropdownRef, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `sprie-config-label`, children: label }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          className: `sprie-config-select-box ${isOpen ? "sprie-config-open" : ""}`,
-          onClick: handleToggleDropdown,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sprie-config-selected-option sprie-config-frame-details-wrapper`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sprie-config-variantImgBox`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "img",
-                {
-                  src: selectedFrame && selectedFrame.variantImage,
-                  alt: "variant-img",
-                  className: `sprie-config-variantImg`,
-                  width: 50,
-                  height: 42
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sprie-config-details`, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `sprie-config-frameName`, children: selectedFrame && selectedFrame.name }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `sprie-config-skuName`, children: selectedFrame && selectedFrame.sku })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "img",
-              {
-                src: dropdownIcon,
-                alt: "dropdown-icon",
-                className: `sprie-config-arrow ${isOpen ? "sprie-config-up" : ""}`
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: `sprie-config-dropdown-options ${isOpen ? "sprie-config-open" : ""}`, children: options && options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "li",
-        {
-          onClick: () => handleSelectOption(option),
-          className: `sprie-config-frame-details-wrapper ${selectedFrame && selectedFrame.name === option.name ? "sprie-config-selected" : ""}`,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sprie-config-variantImgBox`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "img",
-              {
-                src: option.variantImage,
-                alt: "variant-img",
-                className: `sprie-config-variantImg`,
-                width: 50,
-                height: 42
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sprie-config-details`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `sprie-config-frameName`, children: option.name }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `sprie-config-skuName`, children: option.sku })
-            ] })
-          ]
-        },
-        option._id
-      )) })
-    ] }) });
-  }
-  const LensDropdown$1 = "";
-  function LensDropdown({
-    label,
-    lensData,
-    selectedLens,
-    changeLensMaterial
-  }) {
-    const [isOpen, setIsOpen] = reactExports.useState(false);
-    const [hoveredOption, setHoveredOption] = reactExports.useState(
-      null
-    );
-    const dropdownRef = reactExports.useRef(null);
-    const isMobileView = window.innerWidth < 768;
-    const handleToggleDropdown = () => {
-      if (!isMobileView) {
-        setIsOpen((prevIsOpen) => !prevIsOpen);
-      }
-    };
-    const handleSelectOption = (option) => {
-      changeLensMaterial(option);
-      setIsOpen(false);
-    };
-    const handleHoverOption = (option) => {
-      setHoveredOption(option);
-    };
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-    reactExports.useEffect(() => {
-      document.addEventListener("click", handleClickOutside);
-      return () => {
-        document.removeEventListener("click", handleClickOutside);
-      };
-    }, []);
-    const calculateTooltipPosition = (index) => {
-      if (lensData) {
-        const totalElements = lensData.length;
-        const elementsPerRow = 5;
-        const rowIndex = Math.floor(index / elementsPerRow);
-        return rowIndex === Math.floor((totalElements - 1) / elementsPerRow) ? "top" : "";
-      }
-    };
-    const calculateTooltipAlignment = (index) => {
-      const itemsPerRow = 5;
-      const remainder = (index + 1) % itemsPerRow;
-      if (remainder === 0) {
-        return "right";
-      } else {
-        return "left";
-      }
-    };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-dropdown-wrapper", ref: dropdownRef, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sprie-config-label", children: label }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          className: `sprie-config-select-box ${isMobileView ? "sprie-config-open" : `${isOpen ? "sprie-config-open" : ""}`}`,
-          onClick: handleToggleDropdown,
-          style: {
-            background: isMobileView ? "transparent" : "#ffffff",
-            padding: isMobileView ? "0.2rem 1.25rem .7rem 0.1rem" : "1rem 1.25rem"
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-selected-lens", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-colorBox", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "img",
-                {
-                  src: selectedLens && selectedLens.thumbnail,
-                  width: 50
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-lens-details", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sprie-config-lensName", children: selectedLens && selectedLens.name }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sprie-config-lensColor", children: selectedLens && selectedLens.metadata[0].value })
-              ] })
-            ] }),
-            !isMobileView && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "img",
-              {
-                src: dropdownIcon,
-                alt: "dropdown-icon",
-                className: `sprie-config-arrow ${isOpen ? "sprie-config-up" : ""}`
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "ul",
-        {
-          className: `sprie-config-lens-dropdown-options ${isMobileView ? "sprie-config-open" : `${isOpen ? "sprie-config-open" : ""}`}`,
-          style: { marginLeft: isMobileView ? ".1rem" : "0" },
-          children: lensData && lensData.map((option, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "li",
-            {
-              className: selectedLens && selectedLens.name === option.name ? "sprie-config-selected" : "",
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-li-element", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "img",
-                  {
-                    src: option.thumbnail,
-                    width: 50,
-                    onClick: () => handleSelectOption(option),
-                    onMouseEnter: () => handleHoverOption(option),
-                    onMouseLeave: () => setHoveredOption(null)
-                  }
-                ) }),
-                hoveredOption === option && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: `sprie-config-tooltip ${calculateTooltipPosition(
-                      index
-                    )} ${calculateTooltipAlignment(index)}`,
-                    children: option.metadata[0].value
-                  }
-                )
-              ]
-            },
-            index
-          ))
-        }
-      )
-    ] });
-  }
-  function MainContainer({
-    orgName,
-    customEvent,
-    apiService: apiService2,
-    frameList,
-    lensList,
-    viewerOnly,
-    ThreeDConfigurator: ThreeDConfigurator2
-  }) {
-    const [selectedFrame, setSelectedFrame] = reactExports.useState();
-    const [selectedLens, setSelectedLens] = reactExports.useState();
-    const [modelLoading, setModelLoading] = reactExports.useState(false);
-    const domInstance = reactExports.useRef();
-    const orgId = apiService2.fetcher.LoadConfig().ORGID;
-    const setUpAndRender = reactExports.useCallback(async () => {
-      if (apiService2 && frameList && orgId) {
-        setModelLoading(true);
-        const frame = frameList[0];
-        const apiRes = await apiService2.FetchAssetBySKUOrBarcode({
-          sku: frame.sku,
-          barcode: null
-        });
-        ThreeDConfigurator2.renderAsset(
-          {
-            containerId: "holder-canvas",
-            data: {
-              assetDetails: apiRes,
-              customisation: apiRes == null ? void 0 : apiRes.customisation
-            }
-          }
-        ).then((instance) => {
-          setModelLoading(false);
-          setSelectedFrame(frame);
-          domInstance.current = instance;
-        });
-      }
-    }, [orgId, frameList, apiService2, ThreeDConfigurator2]);
-    reactExports.useEffect(() => {
-      setUpAndRender();
-    }, [setUpAndRender]);
-    const getLensInfo = (frame) => {
-      const hasSpecialDefaultLens = (frame == null ? void 0 : frame.customisation.length) == 0;
-      const includedLens = hasSpecialDefaultLens ? null : frame == null ? void 0 : frame.customisation.find((x2) => x2.type == "Lens");
-      return includedLens;
-    };
-    const onChangeLens = async (requestedLens) => {
-      if (!domInstance.current) {
-        return;
-      }
-      if (requestedLens == selectedLens) {
-        return;
-      }
-      const isDefaultRequested = requestedLens.sku == "lens-default";
-      const frameDefaultLens = getLensInfo(selectedFrame);
-      if (!frameDefaultLens && isDefaultRequested) {
-        setModelLoading(true);
-        domInstance.current.changeLens(requestedLens, true, selectedFrame).then(() => {
-          setModelLoading(false);
-        });
-      } else if (!frameDefaultLens && !isDefaultRequested) {
-        if ((selectedLens == null ? void 0 : selectedLens.sku) == "lens-default") {
-          setModelLoading(true);
-          domInstance.current.changeLens(requestedLens, true, selectedFrame).then(() => {
-            setModelLoading(false);
-          });
-        } else {
-          domInstance.current.changeLens(requestedLens, false, selectedFrame);
-        }
-      } else if (frameDefaultLens && isDefaultRequested) {
-        domInstance.current.changeLens(frameDefaultLens, false, selectedFrame);
-      } else {
-        domInstance.current.changeLens(requestedLens, false, selectedFrame);
-      }
-      setSelectedLens(requestedLens);
-    };
-    const onChangeFrame = async (frame, reload) => {
-      if (frame._id == (selectedFrame == null ? void 0 : selectedFrame._id) && !reload) {
-        return;
-      }
-      if (!domInstance.current)
-        return;
-      setModelLoading(true);
-      domInstance.current.changeFrame(frame, selectedLens).then(() => {
-        setModelLoading(false);
-      });
-      setSelectedFrame(frame);
-    };
-    reactExports.useEffect(() => {
-      frameList && setSelectedFrame(frameList[0]);
-      lensList && setSelectedLens(lensList[0]);
-    }, [frameList, lensList]);
-    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-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: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
-            {
-              id: "Sprie-config-Dropdown-Container",
-              style: { display: frameList && lensList ? "flex" : "none" },
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  FrameDropdown,
-                  {
-                    label: "STEP 1 : SELECT FRAME COLOUR",
-                    options: frameList,
-                    selectedFrame,
-                    changeFrame: onChangeFrame
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  LensDropdown,
-                  {
-                    label: "STEP 2 : SELECT LENS COLOUR",
-                    lensData: lensList,
-                    selectedLens,
-                    changeLensMaterial: onChangeLens
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              id: "Sprie-config-Checkout-button",
-              onClick: () => {
-                if (selectedFrame && selectedLens) {
-                  const frameVariantId = selectedFrame.metadata.find(
-                    (item) => item.key == "variantId"
-                  );
-                  const baseCurve = selectedFrame.metadata.find(
-                    (item) => item.key == "baseCurve"
-                  );
-                  let lensVariantKey = "variantId";
-                  if (baseCurve && baseCurve.value == "2B") {
-                    lensVariantKey = "2bVariantId";
-                  } else if (baseCurve && baseCurve.value == "6B") {
-                    lensVariantKey = "6bVariantId";
-                  }
-                  const lensVariantId = selectedLens.metadata.find(
-                    (item) => item.key == lensVariantKey
-                  );
-                  const frameId = frameVariantId ? Number(frameVariantId.value) : null;
-                  const lensId = lensVariantId ? Number(lensVariantId.value) : null;
-                  const eventData = {
-                    frameIdentifier: frameId,
-                    lensIdentifier: lensId
-                  };
-                  customEvent.emitEvent("onAddToCart", eventData);
-                  var cartItems = [];
-                  if (lensVariantId) {
-                    let lensItem = {
-                      id: lensId,
-                      quantity: 1,
-                      properties: null
-                    };
-                    cartItems.push(lensItem);
-                  }
-                  if (frameVariantId) {
-                    const engravingProps = {
-                      customText: "This is an engraving test"
-                    };
-                    const isFlight006x = frameVariantId.value == "46792553201897";
-                    if (isFlight006x) {
-                      let engravingItem = {
-                        id: 44745490890985,
-                        quantity: 1,
-                        properties: null
-                      };
-                      cartItems.push(engravingItem);
-                    }
-                    let frameItem = {
-                      id: frameId,
-                      quantity: 1,
-                      properties: isFlight006x ? engravingProps : null
-                    };
-                    cartItems.push(frameItem);
-                  }
-                  apiService2.HandleShopifyAddToCart(cartItems);
-                }
-              },
-              type: "button",
-              children: "Add to cart"
-            }
-          )
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: "Sprie-config-Viewer-Container", children: [
-        modelLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-loadingFrame", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-loader" }),
-          "."
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, id: "holder-canvas" })
-      ] })
-    ] });
-  }
   var __defProp2 = Object.defineProperty;
   var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __publicField2 = (obj, key, value) => {
@@ -1150,9 +722,9 @@ var __publicField = (obj, key, value) => {
     baseURL: config.host
   });
   function modifyLensArr(arr, element) {
-    const index = arr.findIndex((e) => e["sku"] === element["sku"]);
-    if (index !== -1) {
-      return [element, ...arr.slice(0, index), ...arr.slice(index + 1)];
+    const index2 = arr.findIndex((e) => e["sku"] === element["sku"]);
+    if (index2 !== -1) {
+      return [element, ...arr.slice(0, index2), ...arr.slice(index2 + 1)];
     }
     return arr;
   }
@@ -1646,9 +1218,9 @@ var __publicField = (obj, key, value) => {
       copy[i] = arr[i];
     return copy;
   }
-  function spliceOne$1(list, index) {
-    for (; index + 1 < list.length; index++)
-      list[index] = list[index + 1];
+  function spliceOne$1(list, index2) {
+    for (; index2 + 1 < list.length; index2++)
+      list[index2] = list[index2 + 1];
     list.pop();
   }
   function unwrapListeners$1(arr) {
@@ -8212,8 +7784,8 @@ var __publicField = (obj, key, value) => {
               }
             }
             let keyIndex = 0;
-            for (let index = 0; index < N + 2; index++) {
-              ctx.pbox[index] = ORIG_P[index] ^ key[keyIndex];
+            for (let index2 = 0; index2 < N + 2; index2++) {
+              ctx.pbox[index2] = ORIG_P[index2] ^ key[keyIndex];
               keyIndex++;
               if (keyIndex >= keysize) {
                 keyIndex = 0;
@@ -12687,9 +12259,9 @@ var __publicField = (obj, key, value) => {
       const listeners2 = this._listeners;
       const listenerArray = listeners2[type];
       if (listenerArray !== void 0) {
-        const index = listenerArray.indexOf(listener);
-        if (index !== -1) {
-          listenerArray.splice(index, 1);
+        const index2 = listenerArray.indexOf(listener);
+        if (index2 !== -1) {
+          listenerArray.splice(index2, 1);
         }
       }
     }
@@ -12929,8 +12501,8 @@ var __publicField = (obj, key, value) => {
       this.y = y;
       return this;
     }
-    setComponent(index, value) {
-      switch (index) {
+    setComponent(index2, value) {
+      switch (index2) {
         case 0:
           this.x = value;
           break;
@@ -12938,18 +12510,18 @@ var __publicField = (obj, key, value) => {
           this.y = value;
           break;
         default:
-          throw new Error("index is out of range: " + index);
+          throw new Error("index is out of range: " + index2);
       }
       return this;
     }
-    getComponent(index) {
-      switch (index) {
+    getComponent(index2) {
+      switch (index2) {
         case 0:
           return this.x;
         case 1:
           return this.y;
         default:
-          throw new Error("index is out of range: " + index);
+          throw new Error("index is out of range: " + index2);
       }
     }
     clone() {
@@ -13134,9 +12706,9 @@ var __publicField = (obj, key, value) => {
       array[offset + 1] = this.y;
       return array;
     }
-    fromBufferAttribute(attribute, index) {
-      this.x = attribute.getX(index);
-      this.y = attribute.getY(index);
+    fromBufferAttribute(attribute, index2) {
+      this.x = attribute.getX(index2);
+      this.y = attribute.getY(index2);
       return this;
     }
     rotateAround(center, angle) {
@@ -13935,8 +13507,8 @@ var __publicField = (obj, key, value) => {
       this.w = w2;
       return this;
     }
-    setComponent(index, value) {
-      switch (index) {
+    setComponent(index2, value) {
+      switch (index2) {
         case 0:
           this.x = value;
           break;
@@ -13950,12 +13522,12 @@ var __publicField = (obj, key, value) => {
           this.w = value;
           break;
         default:
-          throw new Error("index is out of range: " + index);
+          throw new Error("index is out of range: " + index2);
       }
       return this;
     }
-    getComponent(index) {
-      switch (index) {
+    getComponent(index2) {
+      switch (index2) {
         case 0:
           return this.x;
         case 1:
@@ -13965,7 +13537,7 @@ var __publicField = (obj, key, value) => {
         case 3:
           return this.w;
         default:
-          throw new Error("index is out of range: " + index);
+          throw new Error("index is out of range: " + index2);
       }
     }
     clone() {
@@ -14241,11 +13813,11 @@ var __publicField = (obj, key, value) => {
       array[offset + 3] = this.w;
       return array;
     }
-    fromBufferAttribute(attribute, index) {
-      this.x = attribute.getX(index);
-      this.y = attribute.getY(index);
-      this.z = attribute.getZ(index);
-      this.w = attribute.getW(index);
+    fromBufferAttribute(attribute, index2) {
+      this.x = attribute.getX(index2);
+      this.y = attribute.getY(index2);
+      this.z = attribute.getZ(index2);
+      this.w = attribute.getW(index2);
       return this;
     }
     random() {
@@ -14739,11 +14311,11 @@ var __publicField = (obj, key, value) => {
       array[offset + 3] = this._w;
       return array;
     }
-    fromBufferAttribute(attribute, index) {
-      this._x = attribute.getX(index);
-      this._y = attribute.getY(index);
-      this._z = attribute.getZ(index);
-      this._w = attribute.getW(index);
+    fromBufferAttribute(attribute, index2) {
+      this._x = attribute.getX(index2);
+      this._y = attribute.getY(index2);
+      this._z = attribute.getZ(index2);
+      this._w = attribute.getW(index2);
       return this;
     }
     toJSON() {
@@ -14795,8 +14367,8 @@ var __publicField = (obj, key, value) => {
       this.z = z;
       return this;
     }
-    setComponent(index, value) {
-      switch (index) {
+    setComponent(index2, value) {
+      switch (index2) {
         case 0:
           this.x = value;
           break;
@@ -14807,12 +14379,12 @@ var __publicField = (obj, key, value) => {
           this.z = value;
           break;
         default:
-          throw new Error("index is out of range: " + index);
+          throw new Error("index is out of range: " + index2);
       }
       return this;
     }
-    getComponent(index) {
-      switch (index) {
+    getComponent(index2) {
+      switch (index2) {
         case 0:
           return this.x;
         case 1:
@@ -14820,7 +14392,7 @@ var __publicField = (obj, key, value) => {
         case 2:
           return this.z;
         default:
-          throw new Error("index is out of range: " + index);
+          throw new Error("index is out of range: " + index2);
       }
     }
     clone() {
@@ -15118,11 +14690,11 @@ var __publicField = (obj, key, value) => {
       this.z = sz;
       return this;
     }
-    setFromMatrixColumn(m2, index) {
-      return this.fromArray(m2.elements, index * 4);
+    setFromMatrixColumn(m2, index2) {
+      return this.fromArray(m2.elements, index2 * 4);
     }
-    setFromMatrix3Column(m2, index) {
-      return this.fromArray(m2.elements, index * 3);
+    setFromMatrix3Column(m2, index2) {
+      return this.fromArray(m2.elements, index2 * 3);
     }
     setFromEuler(e) {
       this.x = e._x;
@@ -15151,10 +14723,10 @@ var __publicField = (obj, key, value) => {
       array[offset + 2] = this.z;
       return array;
     }
-    fromBufferAttribute(attribute, index) {
-      this.x = attribute.getX(index);
-      this.y = attribute.getY(index);
-      this.z = attribute.getZ(index);
+    fromBufferAttribute(attribute, index2) {
+      this.x = attribute.getX(index2);
+      this.y = attribute.getY(index2);
+      this.z = attribute.getZ(index2);
       return this;
     }
     random() {
@@ -17028,10 +16600,10 @@ var __publicField = (obj, key, value) => {
         }
         return this;
       }
-      const index = this.children.indexOf(object);
-      if (index !== -1) {
+      const index2 = this.children.indexOf(object);
+      if (index2 !== -1) {
         object.parent = null;
-        this.children.splice(index, 1);
+        this.children.splice(index2, 1);
         object.dispatchEvent(_removedEvent);
       }
       return this;
@@ -18022,10 +17594,10 @@ var __publicField = (obj, key, value) => {
       array[offset + 2] = this.b;
       return array;
     }
-    fromBufferAttribute(attribute, index) {
-      this.r = attribute.getX(index);
-      this.g = attribute.getY(index);
-      this.b = attribute.getZ(index);
+    fromBufferAttribute(attribute, index2) {
+      this.r = attribute.getX(index2);
+      this.g = attribute.getY(index2);
+      this.b = attribute.getZ(index2);
       return this;
     }
     toJSON() {
@@ -18697,100 +18269,100 @@ var __publicField = (obj, key, value) => {
       this.array.set(value, offset);
       return this;
     }
-    getComponent(index, component) {
-      let value = this.array[index * this.itemSize + component];
+    getComponent(index2, component) {
+      let value = this.array[index2 * this.itemSize + component];
       if (this.normalized)
         value = denormalize(value, this.array);
       return value;
     }
-    setComponent(index, component, value) {
+    setComponent(index2, component, value) {
       if (this.normalized)
         value = normalize(value, this.array);
-      this.array[index * this.itemSize + component] = value;
+      this.array[index2 * this.itemSize + component] = value;
       return this;
     }
-    getX(index) {
-      let x2 = this.array[index * this.itemSize];
+    getX(index2) {
+      let x2 = this.array[index2 * this.itemSize];
       if (this.normalized)
         x2 = denormalize(x2, this.array);
       return x2;
     }
-    setX(index, x2) {
+    setX(index2, x2) {
       if (this.normalized)
         x2 = normalize(x2, this.array);
-      this.array[index * this.itemSize] = x2;
+      this.array[index2 * this.itemSize] = x2;
       return this;
     }
-    getY(index) {
-      let y = this.array[index * this.itemSize + 1];
+    getY(index2) {
+      let y = this.array[index2 * this.itemSize + 1];
       if (this.normalized)
         y = denormalize(y, this.array);
       return y;
     }
-    setY(index, y) {
+    setY(index2, y) {
       if (this.normalized)
         y = normalize(y, this.array);
-      this.array[index * this.itemSize + 1] = y;
+      this.array[index2 * this.itemSize + 1] = y;
       return this;
     }
-    getZ(index) {
-      let z = this.array[index * this.itemSize + 2];
+    getZ(index2) {
+      let z = this.array[index2 * this.itemSize + 2];
       if (this.normalized)
         z = denormalize(z, this.array);
       return z;
     }
-    setZ(index, z) {
+    setZ(index2, z) {
       if (this.normalized)
         z = normalize(z, this.array);
-      this.array[index * this.itemSize + 2] = z;
+      this.array[index2 * this.itemSize + 2] = z;
       return this;
     }
-    getW(index) {
-      let w2 = this.array[index * this.itemSize + 3];
+    getW(index2) {
+      let w2 = this.array[index2 * this.itemSize + 3];
       if (this.normalized)
         w2 = denormalize(w2, this.array);
       return w2;
     }
-    setW(index, w2) {
+    setW(index2, w2) {
       if (this.normalized)
         w2 = normalize(w2, this.array);
-      this.array[index * this.itemSize + 3] = w2;
+      this.array[index2 * this.itemSize + 3] = w2;
       return this;
     }
-    setXY(index, x2, y) {
-      index *= this.itemSize;
+    setXY(index2, x2, y) {
+      index2 *= this.itemSize;
       if (this.normalized) {
         x2 = normalize(x2, this.array);
         y = normalize(y, this.array);
       }
-      this.array[index + 0] = x2;
-      this.array[index + 1] = y;
+      this.array[index2 + 0] = x2;
+      this.array[index2 + 1] = y;
       return this;
     }
-    setXYZ(index, x2, y, z) {
-      index *= this.itemSize;
+    setXYZ(index2, x2, y, z) {
+      index2 *= this.itemSize;
       if (this.normalized) {
         x2 = normalize(x2, this.array);
         y = normalize(y, this.array);
         z = normalize(z, this.array);
       }
-      this.array[index + 0] = x2;
-      this.array[index + 1] = y;
-      this.array[index + 2] = z;
+      this.array[index2 + 0] = x2;
+      this.array[index2 + 1] = y;
+      this.array[index2 + 2] = z;
       return this;
     }
-    setXYZW(index, x2, y, z, w2) {
-      index *= this.itemSize;
+    setXYZW(index2, x2, y, z, w2) {
+      index2 *= this.itemSize;
       if (this.normalized) {
         x2 = normalize(x2, this.array);
         y = normalize(y, this.array);
         z = normalize(z, this.array);
         w2 = normalize(w2, this.array);
       }
-      this.array[index + 0] = x2;
-      this.array[index + 1] = y;
-      this.array[index + 2] = z;
-      this.array[index + 3] = w2;
+      this.array[index2 + 0] = x2;
+      this.array[index2 + 1] = y;
+      this.array[index2 + 2] = z;
+      this.array[index2 + 3] = w2;
       return this;
     }
     onUpload(callback) {
@@ -18859,11 +18431,11 @@ var __publicField = (obj, key, value) => {
     getIndex() {
       return this.index;
     }
-    setIndex(index) {
-      if (Array.isArray(index)) {
-        this.index = new (arrayNeedsUint32(index) ? Uint32BufferAttribute : Uint16BufferAttribute)(index, 1);
+    setIndex(index2) {
+      if (Array.isArray(index2)) {
+        this.index = new (arrayNeedsUint32(index2) ? Uint32BufferAttribute : Uint16BufferAttribute)(index2, 1);
       } else {
-        this.index = index;
+        this.index = index2;
       }
       return this;
     }
@@ -19065,13 +18637,13 @@ var __publicField = (obj, key, value) => {
       }
     }
     computeTangents() {
-      const index = this.index;
+      const index2 = this.index;
       const attributes = this.attributes;
-      if (index === null || attributes.position === void 0 || attributes.normal === void 0 || attributes.uv === void 0) {
+      if (index2 === null || attributes.position === void 0 || attributes.normal === void 0 || attributes.uv === void 0) {
         console.error("THREE.BufferGeometry: .computeTangents() failed. Missing required attributes (index, position, normal or uv)");
         return;
       }
-      const indices = index.array;
+      const indices = index2.array;
       const positions2 = attributes.position.array;
       const normals = attributes.normal.array;
       const uvs = attributes.uv.array;
@@ -19156,7 +18728,7 @@ var __publicField = (obj, key, value) => {
       }
     }
     computeVertexNormals() {
-      const index = this.index;
+      const index2 = this.index;
       const positionAttribute = this.getAttribute("position");
       if (positionAttribute !== void 0) {
         let normalAttribute = this.getAttribute("normal");
@@ -19171,11 +18743,11 @@ var __publicField = (obj, key, value) => {
         const pA = new Vector3(), pB = new Vector3(), pC = new Vector3();
         const nA = new Vector3(), nB = new Vector3(), nC = new Vector3();
         const cb = new Vector3(), ab = new Vector3();
-        if (index) {
-          for (let i = 0, il = index.count; i < il; i += 3) {
-            const vA = index.getX(i + 0);
-            const vB = index.getX(i + 1);
-            const vC = index.getX(i + 2);
+        if (index2) {
+          for (let i = 0, il = index2.count; i < il; i += 3) {
+            const vA = index2.getX(i + 0);
+            const vB = index2.getX(i + 1);
+            const vC = index2.getX(i + 2);
             pA.fromBufferAttribute(positionAttribute, vA);
             pB.fromBufferAttribute(positionAttribute, vB);
             pC.fromBufferAttribute(positionAttribute, vC);
@@ -19223,15 +18795,15 @@ var __publicField = (obj, key, value) => {
         const itemSize = attribute.itemSize;
         const normalized = attribute.normalized;
         const array2 = new array.constructor(indices2.length * itemSize);
-        let index = 0, index2 = 0;
+        let index2 = 0, index22 = 0;
         for (let i = 0, l = indices2.length; i < l; i++) {
           if (attribute.isInterleavedBufferAttribute) {
-            index = indices2[i] * attribute.data.stride + attribute.offset;
+            index2 = indices2[i] * attribute.data.stride + attribute.offset;
           } else {
-            index = indices2[i] * itemSize;
+            index2 = indices2[i] * itemSize;
           }
           for (let j = 0; j < itemSize; j++) {
-            array2[index2++] = array[index++];
+            array2[index22++] = array[index2++];
           }
         }
         return new BufferAttribute(array2, itemSize, normalized);
@@ -19290,11 +18862,11 @@ var __publicField = (obj, key, value) => {
         return data;
       }
       data.data = { attributes: {} };
-      const index = this.index;
-      if (index !== null) {
+      const index2 = this.index;
+      if (index2 !== null) {
         data.data.index = {
-          type: index.array.constructor.name,
-          array: Array.prototype.slice.call(index.array)
+          type: index2.array.constructor.name,
+          array: Array.prototype.slice.call(index2.array)
         };
       }
       const attributes = this.attributes;
@@ -19345,9 +18917,9 @@ var __publicField = (obj, key, value) => {
       this.boundingSphere = null;
       const data = {};
       this.name = source.name;
-      const index = source.index;
-      if (index !== null) {
-        this.setIndex(index.clone(data));
+      const index2 = source.index;
+      if (index2 !== null) {
+        this.setIndex(index2.clone(data));
       }
       const attributes = source.attributes;
       for (const name in attributes) {
@@ -19441,12 +19013,12 @@ var __publicField = (obj, key, value) => {
         }
       }
     }
-    getVertexPosition(index, target) {
+    getVertexPosition(index2, target) {
       const geometry = this.geometry;
       const position = geometry.attributes.position;
       const morphPosition = geometry.morphAttributes.position;
       const morphTargetsRelative = geometry.morphTargetsRelative;
-      target.fromBufferAttribute(position, index);
+      target.fromBufferAttribute(position, index2);
       const morphInfluences = this.morphTargetInfluences;
       if (morphPosition && morphInfluences) {
         _morphA.set(0, 0, 0);
@@ -19455,7 +19027,7 @@ var __publicField = (obj, key, value) => {
           const morphAttribute = morphPosition[i];
           if (influence === 0)
             continue;
-          _tempA.fromBufferAttribute(morphAttribute, index);
+          _tempA.fromBufferAttribute(morphAttribute, index2);
           if (morphTargetsRelative) {
             _morphA.addScaledVector(_tempA, influence);
           } else {
@@ -19495,24 +19067,24 @@ var __publicField = (obj, key, value) => {
       let intersection;
       const geometry = this.geometry;
       const material = this.material;
-      const index = geometry.index;
+      const index2 = geometry.index;
       const position = geometry.attributes.position;
       const uv = geometry.attributes.uv;
       const uv1 = geometry.attributes.uv1;
       const normal = geometry.attributes.normal;
       const groups = geometry.groups;
       const drawRange = geometry.drawRange;
-      if (index !== null) {
+      if (index2 !== null) {
         if (Array.isArray(material)) {
           for (let i = 0, il = groups.length; i < il; i++) {
             const group = groups[i];
             const groupMaterial = material[group.materialIndex];
             const start = Math.max(group.start, drawRange.start);
-            const end = Math.min(index.count, Math.min(group.start + group.count, drawRange.start + drawRange.count));
+            const end = Math.min(index2.count, Math.min(group.start + group.count, drawRange.start + drawRange.count));
             for (let j = start, jl = end; j < jl; j += 3) {
-              const a = index.getX(j);
-              const b = index.getX(j + 1);
-              const c2 = index.getX(j + 2);
+              const a = index2.getX(j);
+              const b = index2.getX(j + 1);
+              const c2 = index2.getX(j + 2);
               intersection = checkGeometryIntersection(this, groupMaterial, raycaster, rayLocalSpace, uv, uv1, normal, a, b, c2);
               if (intersection) {
                 intersection.faceIndex = Math.floor(j / 3);
@@ -19523,11 +19095,11 @@ var __publicField = (obj, key, value) => {
           }
         } else {
           const start = Math.max(0, drawRange.start);
-          const end = Math.min(index.count, drawRange.start + drawRange.count);
+          const end = Math.min(index2.count, drawRange.start + drawRange.count);
           for (let i = start, il = end; i < il; i += 3) {
-            const a = index.getX(i);
-            const b = index.getX(i + 1);
-            const c2 = index.getX(i + 2);
+            const a = index2.getX(i);
+            const b = index2.getX(i + 1);
+            const c2 = index2.getX(i + 2);
             intersection = checkGeometryIntersection(this, material, raycaster, rayLocalSpace, uv, uv1, normal, a, b, c2);
             if (intersection) {
               intersection.faceIndex = Math.floor(i / 3);
@@ -21548,7 +21120,7 @@ var __publicField = (obj, key, value) => {
     const defaultState = createBindingState(null);
     let currentState = defaultState;
     let forceUpdate = false;
-    function setup(object, material, program, geometry, index) {
+    function setup(object, material, program, geometry, index2) {
       let updateBuffers = false;
       if (vaoAvailable) {
         const state = getBindingState(geometry, program, material);
@@ -21556,9 +21128,9 @@ var __publicField = (obj, key, value) => {
           currentState = state;
           bindVertexArrayObject(currentState.object);
         }
-        updateBuffers = needsUpdate(object, geometry, program, index);
+        updateBuffers = needsUpdate(object, geometry, program, index2);
         if (updateBuffers)
-          saveCache(object, geometry, program, index);
+          saveCache(object, geometry, program, index2);
       } else {
         const wireframe = material.wireframe === true;
         if (currentState.geometry !== geometry.id || currentState.program !== program.id || currentState.wireframe !== wireframe) {
@@ -21568,14 +21140,14 @@ var __publicField = (obj, key, value) => {
           updateBuffers = true;
         }
       }
-      if (index !== null) {
-        attributes.update(index, gl.ELEMENT_ARRAY_BUFFER);
+      if (index2 !== null) {
+        attributes.update(index2, gl.ELEMENT_ARRAY_BUFFER);
       }
       if (updateBuffers || forceUpdate) {
         forceUpdate = false;
         setupVertexAttributes(object, material, program, geometry);
-        if (index !== null) {
-          gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, attributes.get(index).buffer);
+        if (index2 !== null) {
+          gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, attributes.get(index2).buffer);
         }
       }
     }
@@ -21635,7 +21207,7 @@ var __publicField = (obj, key, value) => {
         index: null
       };
     }
-    function needsUpdate(object, geometry, program, index) {
+    function needsUpdate(object, geometry, program, index2) {
       const cachedAttributes = currentState.attributes;
       const geometryAttributes = geometry.attributes;
       let attributesNum = 0;
@@ -21662,11 +21234,11 @@ var __publicField = (obj, key, value) => {
       }
       if (currentState.attributesNum !== attributesNum)
         return true;
-      if (currentState.index !== index)
+      if (currentState.index !== index2)
         return true;
       return false;
     }
-    function saveCache(object, geometry, program, index) {
+    function saveCache(object, geometry, program, index2) {
       const cache = {};
       const attributes2 = geometry.attributes;
       let attributesNum = 0;
@@ -21692,7 +21264,7 @@ var __publicField = (obj, key, value) => {
       }
       currentState.attributes = cache;
       currentState.attributesNum = attributesNum;
-      currentState.index = index;
+      currentState.index = index2;
     }
     function initAttributes() {
       const newAttributes = currentState.newAttributes;
@@ -21728,11 +21300,11 @@ var __publicField = (obj, key, value) => {
         }
       }
     }
-    function vertexAttribPointer(index, size, type, normalized, stride, offset, integer) {
+    function vertexAttribPointer(index2, size, type, normalized, stride, offset, integer) {
       if (integer === true) {
-        gl.vertexAttribIPointer(index, size, type, stride, offset);
+        gl.vertexAttribIPointer(index2, size, type, stride, offset);
       } else {
-        gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
+        gl.vertexAttribPointer(index2, size, type, normalized, stride, offset);
       }
     }
     function setupVertexAttributes(object, material, program, geometry) {
@@ -23308,14 +22880,14 @@ var __publicField = (obj, key, value) => {
         let morphInfluencesSum = 0;
         for (let i = 0; i < 8; i++) {
           const influence = workInfluences[i];
-          const index = influence[0];
+          const index2 = influence[0];
           const value = influence[1];
-          if (index !== Number.MAX_SAFE_INTEGER && value) {
-            if (morphTargets && geometry.getAttribute("morphTarget" + i) !== morphTargets[index]) {
-              geometry.setAttribute("morphTarget" + i, morphTargets[index]);
+          if (index2 !== Number.MAX_SAFE_INTEGER && value) {
+            if (morphTargets && geometry.getAttribute("morphTarget" + i) !== morphTargets[index2]) {
+              geometry.setAttribute("morphTarget" + i, morphTargets[index2]);
             }
-            if (morphNormals && geometry.getAttribute("morphNormal" + i) !== morphNormals[index]) {
-              geometry.setAttribute("morphNormal" + i, morphNormals[index]);
+            if (morphNormals && geometry.getAttribute("morphNormal" + i) !== morphNormals[index2]) {
+              geometry.setAttribute("morphNormal" + i, morphNormals[index2]);
             }
             morphInfluences[i] = value;
             morphInfluencesSum += value;
@@ -28360,27 +27932,27 @@ var __publicField = (obj, key, value) => {
       this.cameraAutoUpdate = true;
       this.enabled = false;
       this.isPresenting = false;
-      this.getController = function(index) {
-        let controller = controllers[index];
+      this.getController = function(index2) {
+        let controller = controllers[index2];
         if (controller === void 0) {
           controller = new WebXRController();
-          controllers[index] = controller;
+          controllers[index2] = controller;
         }
         return controller.getTargetRaySpace();
       };
-      this.getControllerGrip = function(index) {
-        let controller = controllers[index];
+      this.getControllerGrip = function(index2) {
+        let controller = controllers[index2];
         if (controller === void 0) {
           controller = new WebXRController();
-          controllers[index] = controller;
+          controllers[index2] = controller;
         }
         return controller.getGripSpace();
       };
-      this.getHand = function(index) {
-        let controller = controllers[index];
+      this.getHand = function(index2) {
+        let controller = controllers[index2];
         if (controller === void 0) {
           controller = new WebXRController();
-          controllers[index] = controller;
+          controllers[index2] = controller;
         }
         return controller.getHandSpace();
       };
@@ -28538,10 +28110,10 @@ var __publicField = (obj, key, value) => {
       function onInputSourcesChange(event) {
         for (let i = 0; i < event.removed.length; i++) {
           const inputSource = event.removed[i];
-          const index = controllerInputSources.indexOf(inputSource);
-          if (index >= 0) {
-            controllerInputSources[index] = null;
-            controllers[index].disconnect(inputSource);
+          const index2 = controllerInputSources.indexOf(inputSource);
+          if (index2 >= 0) {
+            controllerInputSources[index2] = null;
+            controllers[index2].disconnect(inputSource);
           }
         }
         for (let i = 0; i < event.added.length; i++) {
@@ -29129,28 +28701,28 @@ var __publicField = (obj, key, value) => {
       }
       gl.bindBuffer(gl.UNIFORM_BUFFER, null);
     }
-    function hasUniformChanged(uniform, index, cache) {
+    function hasUniformChanged(uniform, index2, cache) {
       const value = uniform.value;
-      if (cache[index] === void 0) {
+      if (cache[index2] === void 0) {
         if (typeof value === "number") {
-          cache[index] = value;
+          cache[index2] = value;
         } else {
           const values = Array.isArray(value) ? value : [value];
           const tempValues = [];
           for (let i = 0; i < values.length; i++) {
             tempValues.push(values[i].clone());
           }
-          cache[index] = tempValues;
+          cache[index2] = tempValues;
         }
         return true;
       } else {
         if (typeof value === "number") {
-          if (cache[index] !== value) {
-            cache[index] = value;
+          if (cache[index2] !== value) {
+            cache[index2] = value;
             return true;
           }
         } else {
-          const cachedObjects = Array.isArray(cache[index]) ? cache[index] : [cache[index]];
+          const cachedObjects = Array.isArray(cache[index2]) ? cache[index2] : [cache[index2]];
           const values = Array.isArray(value) ? value : [value];
           for (let i = 0; i < cachedObjects.length; i++) {
             const cachedObject = cachedObjects[i];
@@ -29237,8 +28809,8 @@ var __publicField = (obj, key, value) => {
     function onUniformsGroupsDispose(event) {
       const uniformsGroup = event.target;
       uniformsGroup.removeEventListener("dispose", onUniformsGroupsDispose);
-      const index = allocatedBindingPoints.indexOf(uniformsGroup.__bindingPointIndex);
-      allocatedBindingPoints.splice(index, 1);
+      const index2 = allocatedBindingPoints.indexOf(uniformsGroup.__bindingPointIndex);
+      allocatedBindingPoints.splice(index2, 1);
       gl.deleteBuffer(buffers[uniformsGroup.id]);
       delete buffers[uniformsGroup.id];
       delete updateList[uniformsGroup.id];
@@ -29658,11 +29230,11 @@ var __publicField = (obj, key, value) => {
         const frontFaceCW = object.isMesh && object.matrixWorld.determinant() < 0;
         const program = setProgram(camera, scene, geometry, material, object);
         state.setMaterial(material, frontFaceCW);
-        let index = geometry.index;
+        let index2 = geometry.index;
         let rangeFactor = 1;
         if (material.wireframe === true) {
-          index = geometries.getWireframeAttribute(geometry);
-          if (index === void 0)
+          index2 = geometries.getWireframeAttribute(geometry);
+          if (index2 === void 0)
             return;
           rangeFactor = 2;
         }
@@ -29674,9 +29246,9 @@ var __publicField = (obj, key, value) => {
           drawStart = Math.max(drawStart, group.start * rangeFactor);
           drawEnd = Math.min(drawEnd, (group.start + group.count) * rangeFactor);
         }
-        if (index !== null) {
+        if (index2 !== null) {
           drawStart = Math.max(drawStart, 0);
-          drawEnd = Math.min(drawEnd, index.count);
+          drawEnd = Math.min(drawEnd, index2.count);
         } else if (position !== void 0 && position !== null) {
           drawStart = Math.max(drawStart, 0);
           drawEnd = Math.min(drawEnd, position.count);
@@ -29684,11 +29256,11 @@ var __publicField = (obj, key, value) => {
         const drawCount = drawEnd - drawStart;
         if (drawCount < 0 || drawCount === Infinity)
           return;
-        bindingStates.setup(object, material, program, geometry, index);
+        bindingStates.setup(object, material, program, geometry, index2);
         let attribute;
         let renderer = bufferRenderer;
-        if (index !== null) {
-          attribute = attributes.get(index);
+        if (index2 !== null) {
+          attribute = attributes.get(index2);
           renderer = indexedBufferRenderer;
           renderer.setIndex(attribute);
         }
@@ -30789,88 +30361,88 @@ var __publicField = (obj, key, value) => {
       }
       return this;
     }
-    setX(index, x2) {
+    setX(index2, x2) {
       if (this.normalized)
         x2 = normalize(x2, this.array);
-      this.data.array[index * this.data.stride + this.offset] = x2;
+      this.data.array[index2 * this.data.stride + this.offset] = x2;
       return this;
     }
-    setY(index, y) {
+    setY(index2, y) {
       if (this.normalized)
         y = normalize(y, this.array);
-      this.data.array[index * this.data.stride + this.offset + 1] = y;
+      this.data.array[index2 * this.data.stride + this.offset + 1] = y;
       return this;
     }
-    setZ(index, z) {
+    setZ(index2, z) {
       if (this.normalized)
         z = normalize(z, this.array);
-      this.data.array[index * this.data.stride + this.offset + 2] = z;
+      this.data.array[index2 * this.data.stride + this.offset + 2] = z;
       return this;
     }
-    setW(index, w2) {
+    setW(index2, w2) {
       if (this.normalized)
         w2 = normalize(w2, this.array);
-      this.data.array[index * this.data.stride + this.offset + 3] = w2;
+      this.data.array[index2 * this.data.stride + this.offset + 3] = w2;
       return this;
     }
-    getX(index) {
-      let x2 = this.data.array[index * this.data.stride + this.offset];
+    getX(index2) {
+      let x2 = this.data.array[index2 * this.data.stride + this.offset];
       if (this.normalized)
         x2 = denormalize(x2, this.array);
       return x2;
     }
-    getY(index) {
-      let y = this.data.array[index * this.data.stride + this.offset + 1];
+    getY(index2) {
+      let y = this.data.array[index2 * this.data.stride + this.offset + 1];
       if (this.normalized)
         y = denormalize(y, this.array);
       return y;
     }
-    getZ(index) {
-      let z = this.data.array[index * this.data.stride + this.offset + 2];
+    getZ(index2) {
+      let z = this.data.array[index2 * this.data.stride + this.offset + 2];
       if (this.normalized)
         z = denormalize(z, this.array);
       return z;
     }
-    getW(index) {
-      let w2 = this.data.array[index * this.data.stride + this.offset + 3];
+    getW(index2) {
+      let w2 = this.data.array[index2 * this.data.stride + this.offset + 3];
       if (this.normalized)
         w2 = denormalize(w2, this.array);
       return w2;
     }
-    setXY(index, x2, y) {
-      index = index * this.data.stride + this.offset;
+    setXY(index2, x2, y) {
+      index2 = index2 * this.data.stride + this.offset;
       if (this.normalized) {
         x2 = normalize(x2, this.array);
         y = normalize(y, this.array);
       }
-      this.data.array[index + 0] = x2;
-      this.data.array[index + 1] = y;
+      this.data.array[index2 + 0] = x2;
+      this.data.array[index2 + 1] = y;
       return this;
     }
-    setXYZ(index, x2, y, z) {
-      index = index * this.data.stride + this.offset;
+    setXYZ(index2, x2, y, z) {
+      index2 = index2 * this.data.stride + this.offset;
       if (this.normalized) {
         x2 = normalize(x2, this.array);
         y = normalize(y, this.array);
         z = normalize(z, this.array);
       }
-      this.data.array[index + 0] = x2;
-      this.data.array[index + 1] = y;
-      this.data.array[index + 2] = z;
+      this.data.array[index2 + 0] = x2;
+      this.data.array[index2 + 1] = y;
+      this.data.array[index2 + 2] = z;
       return this;
     }
-    setXYZW(index, x2, y, z, w2) {
-      index = index * this.data.stride + this.offset;
+    setXYZW(index2, x2, y, z, w2) {
+      index2 = index2 * this.data.stride + this.offset;
       if (this.normalized) {
         x2 = normalize(x2, this.array);
         y = normalize(y, this.array);
         z = normalize(z, this.array);
         w2 = normalize(w2, this.array);
       }
-      this.data.array[index + 0] = x2;
-      this.data.array[index + 1] = y;
-      this.data.array[index + 2] = z;
-      this.data.array[index + 3] = w2;
+      this.data.array[index2 + 0] = x2;
+      this.data.array[index2 + 1] = y;
+      this.data.array[index2 + 2] = z;
+      this.data.array[index2 + 3] = w2;
       return this;
     }
     clone(data) {
@@ -30878,9 +30450,9 @@ var __publicField = (obj, key, value) => {
         console.log("THREE.InterleavedBufferAttribute.clone(): Cloning an interleaved buffer attribute will de-interleave buffer data.");
         const array = [];
         for (let i = 0; i < this.count; i++) {
-          const index = i * this.data.stride + this.offset;
+          const index2 = i * this.data.stride + this.offset;
           for (let j = 0; j < this.itemSize; j++) {
-            array.push(this.data.array[index + j]);
+            array.push(this.data.array[index2 + j]);
           }
         }
         return new BufferAttribute(new this.array.constructor(array), this.itemSize, this.normalized);
@@ -30899,9 +30471,9 @@ var __publicField = (obj, key, value) => {
         console.log("THREE.InterleavedBufferAttribute.toJSON(): Serializing an interleaved buffer attribute will de-interleave buffer data.");
         const array = [];
         for (let i = 0; i < this.count; i++) {
-          const index = i * this.data.stride + this.offset;
+          const index2 = i * this.data.stride + this.offset;
           for (let j = 0; j < this.itemSize; j++) {
-            array.push(this.data.array[index + j]);
+            array.push(this.data.array[index2 + j]);
           }
         }
         return {
@@ -31002,9 +30574,9 @@ var __publicField = (obj, key, value) => {
       }
       this._computeIntersections(raycaster, intersects, _ray$2);
     }
-    getVertexPosition(index, target) {
-      super.getVertexPosition(index, target);
-      this.applyBoneTransform(index, target);
+    getVertexPosition(index2, target) {
+      super.getVertexPosition(index2, target);
+      this.applyBoneTransform(index2, target);
       return target;
     }
     bind(skeleton, bindMatrix) {
@@ -31044,11 +30616,11 @@ var __publicField = (obj, key, value) => {
         console.warn("THREE.SkinnedMesh: Unrecognized bindMode: " + this.bindMode);
       }
     }
-    applyBoneTransform(index, vector) {
+    applyBoneTransform(index2, vector) {
       const skeleton = this.skeleton;
       const geometry = this.geometry;
-      _skinIndex.fromBufferAttribute(geometry.attributes.skinIndex, index);
-      _skinWeight.fromBufferAttribute(geometry.attributes.skinWeight, index);
+      _skinIndex.fromBufferAttribute(geometry.attributes.skinIndex, index2);
+      _skinWeight.fromBufferAttribute(geometry.attributes.skinWeight, index2);
       _basePosition.copy(vector).applyMatrix4(this.bindMatrix);
       vector.set(0, 0, 0);
       for (let i = 0; i < 4; i++) {
@@ -31061,9 +30633,9 @@ var __publicField = (obj, key, value) => {
       }
       return vector.applyMatrix4(this.bindMatrixInverse);
     }
-    boneTransform(index, vector) {
+    boneTransform(index2, vector) {
       console.warn("THREE.SkinnedMesh: .boneTransform() was renamed to .applyBoneTransform() in r151.");
-      return this.applyBoneTransform(index, vector);
+      return this.applyBoneTransform(index2, vector);
     }
   }
   class Bone extends Object3D {
@@ -31305,11 +30877,11 @@ var __publicField = (obj, key, value) => {
         this.boundingSphere = source.boundingSphere.clone();
       return this;
     }
-    getColorAt(index, color) {
-      color.fromArray(this.instanceColor.array, index * 3);
+    getColorAt(index2, color) {
+      color.fromArray(this.instanceColor.array, index2 * 3);
     }
-    getMatrixAt(index, matrix) {
-      matrix.fromArray(this.instanceMatrix.array, index * 16);
+    getMatrixAt(index2, matrix) {
+      matrix.fromArray(this.instanceMatrix.array, index2 * 16);
     }
     raycast(raycaster, intersects) {
       const matrixWorld = this.matrixWorld;
@@ -31338,14 +30910,14 @@ var __publicField = (obj, key, value) => {
         _instanceIntersects.length = 0;
       }
     }
-    setColorAt(index, color) {
+    setColorAt(index2, color) {
       if (this.instanceColor === null) {
         this.instanceColor = new InstancedBufferAttribute(new Float32Array(this.instanceMatrix.count * 3), 3);
       }
-      color.toArray(this.instanceColor.array, index * 3);
+      color.toArray(this.instanceColor.array, index2 * 3);
     }
-    setMatrixAt(index, matrix) {
-      matrix.toArray(this.instanceMatrix.array, index * 16);
+    setMatrixAt(index2, matrix) {
+      matrix.toArray(this.instanceMatrix.array, index2 * 16);
     }
     updateMorphTargets() {
     }
@@ -31435,15 +31007,15 @@ var __publicField = (obj, key, value) => {
       const interSegment = new Vector3();
       const interRay = new Vector3();
       const step = this.isLineSegments ? 2 : 1;
-      const index = geometry.index;
+      const index2 = geometry.index;
       const attributes = geometry.attributes;
       const positionAttribute = attributes.position;
-      if (index !== null) {
+      if (index2 !== null) {
         const start = Math.max(0, drawRange.start);
-        const end = Math.min(index.count, drawRange.start + drawRange.count);
+        const end = Math.min(index2.count, drawRange.start + drawRange.count);
         for (let i = start, l = end - 1; i < l; i += step) {
-          const a = index.getX(i);
-          const b = index.getX(i + 1);
+          const a = index2.getX(i);
+          const b = index2.getX(i + 1);
           vStart.fromBufferAttribute(positionAttribute, a);
           vEnd.fromBufferAttribute(positionAttribute, b);
           const distSq = _ray$1.distanceSqToSegment(vStart, vEnd, interRay, interSegment);
@@ -31600,14 +31172,14 @@ var __publicField = (obj, key, value) => {
       _ray$4.copy(raycaster.ray).applyMatrix4(_inverseMatrix);
       const localThreshold = threshold / ((this.scale.x + this.scale.y + this.scale.z) / 3);
       const localThresholdSq = localThreshold * localThreshold;
-      const index = geometry.index;
+      const index2 = geometry.index;
       const attributes = geometry.attributes;
       const positionAttribute = attributes.position;
-      if (index !== null) {
+      if (index2 !== null) {
         const start = Math.max(0, drawRange.start);
-        const end = Math.min(index.count, drawRange.start + drawRange.count);
+        const end = Math.min(index2.count, drawRange.start + drawRange.count);
         for (let i = start, il = end; i < il; i++) {
-          const a = index.getX(i);
+          const a = index2.getX(i);
           _position$2.fromBufferAttribute(positionAttribute, a);
           testPoint(_position$2, a, localThresholdSq, matrixWorld, raycaster, intersects, this);
         }
@@ -31638,7 +31210,7 @@ var __publicField = (obj, key, value) => {
       }
     }
   }
-  function testPoint(point, index, localThresholdSq, matrixWorld, raycaster, intersects, object) {
+  function testPoint(point, index2, localThresholdSq, matrixWorld, raycaster, intersects, object) {
     const rayPointDistanceSq = _ray$4.distanceSqToPoint(point);
     if (rayPointDistanceSq < localThresholdSq) {
       const intersectPoint = new Vector3();
@@ -31651,7 +31223,7 @@ var __publicField = (obj, key, value) => {
         distance,
         distanceToRay: Math.sqrt(rayPointDistanceSq),
         point: intersectPoint,
-        index,
+        index: index2,
         face: null,
         object
       });
@@ -32061,8 +31633,8 @@ var __publicField = (obj, key, value) => {
     getSettings_() {
       return this.settings || this.DefaultSettings_;
     }
-    copySampleValue_(index) {
-      const result = this.resultBuffer, values = this.sampleValues, stride = this.valueSize, offset = index * stride;
+    copySampleValue_(index2) {
+      const result = this.resultBuffer, values = this.sampleValues, stride = this.valueSize, offset = index2 * stride;
       for (let i = 0; i !== stride; ++i) {
         result[i] = values[offset + i];
       }
@@ -32761,9 +32333,9 @@ var __publicField = (obj, key, value) => {
         return this;
       };
       this.removeHandler = function(regex) {
-        const index = handlers.indexOf(regex);
-        if (index !== -1) {
-          handlers.splice(index, 2);
+        const index2 = handlers.indexOf(regex);
+        if (index2 !== -1) {
+          handlers.splice(index2, 2);
         }
         return this;
       };
@@ -33439,10 +33011,10 @@ var __publicField = (obj, key, value) => {
       }
     }
     static extractUrlBase(url) {
-      const index = url.lastIndexOf("/");
-      if (index === -1)
+      const index2 = url.lastIndexOf("/");
+      if (index2 === -1)
         return "./";
-      return url.slice(0, index + 1);
+      return url.slice(0, index2 + 1);
     }
     static resolveURL(url, path) {
       if (typeof url !== "string" || url === "")
@@ -34792,8 +34364,8 @@ var __publicField = (obj, key, value) => {
       return geometry;
     }
     if (drawMode === TriangleFanDrawMode || drawMode === TriangleStripDrawMode) {
-      let index = geometry.getIndex();
-      if (index === null) {
+      let index2 = geometry.getIndex();
+      if (index2 === null) {
         const indices = [];
         const position = geometry.getAttribute("position");
         if (position !== void 0) {
@@ -34801,30 +34373,30 @@ var __publicField = (obj, key, value) => {
             indices.push(i);
           }
           geometry.setIndex(indices);
-          index = geometry.getIndex();
+          index2 = geometry.getIndex();
         } else {
           console.error("THREE.BufferGeometryUtils.toTrianglesDrawMode(): Undefined position attribute. Processing not possible.");
           return geometry;
         }
       }
-      const numberOfTriangles = index.count - 2;
+      const numberOfTriangles = index2.count - 2;
       const newIndices = [];
       if (drawMode === TriangleFanDrawMode) {
         for (let i = 1; i <= numberOfTriangles; i++) {
-          newIndices.push(index.getX(0));
-          newIndices.push(index.getX(i));
-          newIndices.push(index.getX(i + 1));
+          newIndices.push(index2.getX(0));
+          newIndices.push(index2.getX(i));
+          newIndices.push(index2.getX(i + 1));
         }
       } else {
         for (let i = 0; i < numberOfTriangles; i++) {
           if (i % 2 === 0) {
-            newIndices.push(index.getX(i));
-            newIndices.push(index.getX(i + 1));
-            newIndices.push(index.getX(i + 2));
+            newIndices.push(index2.getX(i));
+            newIndices.push(index2.getX(i + 1));
+            newIndices.push(index2.getX(i + 2));
           } else {
-            newIndices.push(index.getX(i + 2));
-            newIndices.push(index.getX(i + 1));
-            newIndices.push(index.getX(i));
+            newIndices.push(index2.getX(i + 2));
+            newIndices.push(index2.getX(i + 1));
+            newIndices.push(index2.getX(i));
           }
         }
       }
@@ -35142,10 +34714,10 @@ var __publicField = (obj, key, value) => {
       parser.cache.add(cacheKey, dependency);
       return dependency;
     }
-    getDependency(type, index) {
+    getDependency(type, index2) {
       if (type !== "light")
         return;
-      return this._loadLight(index);
+      return this._loadLight(index2);
     }
     createNodeAttachment(nodeIndex) {
       const self2 = this;
@@ -35592,9 +35164,9 @@ var __publicField = (obj, key, value) => {
       this.name = EXTENSIONS.EXT_MESHOPT_COMPRESSION;
       this.parser = parser;
     }
-    loadBufferView(index) {
+    loadBufferView(index2) {
       const json = this.parser.json;
-      const bufferView = json.bufferViews[index];
+      const bufferView = json.bufferViews[index2];
       if (bufferView.extensions && bufferView.extensions[this.name]) {
         const extensionDef = bufferView.extensions[this.name];
         const buffer = this.parser.getDependency("buffer", extensionDef.buffer);
@@ -35826,8 +35398,8 @@ var __publicField = (obj, key, value) => {
     constructor(parameterPositions, sampleValues, sampleSize, resultBuffer) {
       super(parameterPositions, sampleValues, sampleSize, resultBuffer);
     }
-    copySampleValue_(index) {
-      const result = this.resultBuffer, values = this.sampleValues, valueSize = this.valueSize, offset = index * valueSize * 3 + valueSize;
+    copySampleValue_(index2) {
+      const result = this.resultBuffer, values = this.sampleValues, valueSize = this.valueSize, offset = index2 * valueSize * 3 + valueSize;
       for (let i = 0; i !== valueSize; i++) {
         result[i] = values[offset + i];
       }
@@ -36210,17 +35782,17 @@ var __publicField = (obj, key, value) => {
      *
      * Example: CesiumMilkTruck sample model reuses "Wheel" meshes.
      */
-    _addNodeRef(cache, index) {
-      if (index === void 0)
+    _addNodeRef(cache, index2) {
+      if (index2 === void 0)
         return;
-      if (cache.refs[index] === void 0) {
-        cache.refs[index] = cache.uses[index] = 0;
+      if (cache.refs[index2] === void 0) {
+        cache.refs[index2] = cache.uses[index2] = 0;
       }
-      cache.refs[index]++;
+      cache.refs[index2]++;
     }
     /** Returns a reference to a shared resource, cloning it if necessary. */
-    _getNodeRef(cache, index, object) {
-      if (cache.refs[index] <= 1)
+    _getNodeRef(cache, index2, object) {
+      if (cache.refs[index2] <= 1)
         return object;
       const ref = object.clone();
       const updateMappings = (original, clone) => {
@@ -36233,7 +35805,7 @@ var __publicField = (obj, key, value) => {
         }
       };
       updateMappings(object, ref);
-      ref.name += "_instance_" + cache.uses[index]++;
+      ref.name += "_instance_" + cache.uses[index2]++;
       return ref;
     }
     _invokeOne(func) {
@@ -36263,59 +35835,59 @@ var __publicField = (obj, key, value) => {
      * @param {number} index
      * @return {Promise<Object3D|Material|THREE.Texture|AnimationClip|ArrayBuffer|Object>}
      */
-    getDependency(type, index) {
-      const cacheKey = type + ":" + index;
+    getDependency(type, index2) {
+      const cacheKey = type + ":" + index2;
       let dependency = this.cache.get(cacheKey);
       if (!dependency) {
         switch (type) {
           case "scene":
-            dependency = this.loadScene(index);
+            dependency = this.loadScene(index2);
             break;
           case "node":
             dependency = this._invokeOne(function(ext) {
-              return ext.loadNode && ext.loadNode(index);
+              return ext.loadNode && ext.loadNode(index2);
             });
             break;
           case "mesh":
             dependency = this._invokeOne(function(ext) {
-              return ext.loadMesh && ext.loadMesh(index);
+              return ext.loadMesh && ext.loadMesh(index2);
             });
             break;
           case "accessor":
-            dependency = this.loadAccessor(index);
+            dependency = this.loadAccessor(index2);
             break;
           case "bufferView":
             dependency = this._invokeOne(function(ext) {
-              return ext.loadBufferView && ext.loadBufferView(index);
+              return ext.loadBufferView && ext.loadBufferView(index2);
             });
             break;
           case "buffer":
-            dependency = this.loadBuffer(index);
+            dependency = this.loadBuffer(index2);
             break;
           case "material":
             dependency = this._invokeOne(function(ext) {
-              return ext.loadMaterial && ext.loadMaterial(index);
+              return ext.loadMaterial && ext.loadMaterial(index2);
             });
             break;
           case "texture":
             dependency = this._invokeOne(function(ext) {
-              return ext.loadTexture && ext.loadTexture(index);
+              return ext.loadTexture && ext.loadTexture(index2);
             });
             break;
           case "skin":
-            dependency = this.loadSkin(index);
+            dependency = this.loadSkin(index2);
             break;
           case "animation":
             dependency = this._invokeOne(function(ext) {
-              return ext.loadAnimation && ext.loadAnimation(index);
+              return ext.loadAnimation && ext.loadAnimation(index2);
             });
             break;
           case "camera":
-            dependency = this.loadCamera(index);
+            dependency = this.loadCamera(index2);
             break;
           default:
             dependency = this._invokeOne(function(ext) {
-              return ext != this && ext.getDependency && ext.getDependency(type, index);
+              return ext != this && ext.getDependency && ext.getDependency(type, index2);
             });
             if (!dependency) {
               throw new Error("Unknown type: " + type);
@@ -36336,8 +35908,8 @@ var __publicField = (obj, key, value) => {
       if (!dependencies) {
         const parser = this;
         const defs = this.json[type + (type === "mesh" ? "es" : "s")] || [];
-        dependencies = Promise.all(defs.map(function(def, index) {
-          return parser.getDependency(type, index);
+        dependencies = Promise.all(defs.map(function(def, index2) {
+          return parser.getDependency(type, index2);
         }));
         this.cache.add(type, dependencies);
       }
@@ -36442,14 +36014,14 @@ var __publicField = (obj, key, value) => {
             bufferAttribute = new BufferAttribute(bufferAttribute.array.slice(), bufferAttribute.itemSize, bufferAttribute.normalized);
           }
           for (let i = 0, il = sparseIndices.length; i < il; i++) {
-            const index = sparseIndices[i];
-            bufferAttribute.setX(index, sparseValues[i * itemSize]);
+            const index2 = sparseIndices[i];
+            bufferAttribute.setX(index2, sparseValues[i * itemSize]);
             if (itemSize >= 2)
-              bufferAttribute.setY(index, sparseValues[i * itemSize + 1]);
+              bufferAttribute.setY(index2, sparseValues[i * itemSize + 1]);
             if (itemSize >= 3)
-              bufferAttribute.setZ(index, sparseValues[i * itemSize + 2]);
+              bufferAttribute.setZ(index2, sparseValues[i * itemSize + 2]);
             if (itemSize >= 4)
-              bufferAttribute.setW(index, sparseValues[i * itemSize + 3]);
+              bufferAttribute.setW(index2, sparseValues[i * itemSize + 3]);
             if (itemSize >= 5)
               throw new Error("THREE.GLTFLoader: Unsupported itemSize in sparse BufferAttribute.");
           }
@@ -38438,14 +38010,14 @@ var __publicField = (obj, key, value) => {
       this.passes.push(pass);
       pass.setSize(this._width * this._pixelRatio, this._height * this._pixelRatio);
     }
-    insertPass(pass, index) {
-      this.passes.splice(index, 0, pass);
+    insertPass(pass, index2) {
+      this.passes.splice(index2, 0, pass);
       pass.setSize(this._width * this._pixelRatio, this._height * this._pixelRatio);
     }
     removePass(pass) {
-      const index = this.passes.indexOf(pass);
-      if (index !== -1) {
-        this.passes.splice(index, 1);
+      const index2 = this.passes.indexOf(pass);
+      if (index2 !== -1) {
+        this.passes.splice(index2, 1);
       }
     }
     isLastEnabledPass(passIndex) {
@@ -38818,10 +38390,10 @@ var __publicField = (obj, key, value) => {
     if (!geo.index) {
       const vertexCount = geo.attributes.position.count;
       const BufferConstructor = options.useSharedArrayBuffer ? SharedArrayBuffer : ArrayBuffer;
-      const index = getIndexArray(vertexCount, BufferConstructor);
-      geo.setIndex(new BufferAttribute(index, 1));
+      const index2 = getIndexArray(vertexCount, BufferConstructor);
+      geo.setIndex(new BufferAttribute(index2, 1));
       for (let i = 0; i < vertexCount; i++) {
-        index[i] = i;
+        index2[i] = i;
       }
     }
   }
@@ -39036,7 +38608,7 @@ var __publicField = (obj, key, value) => {
   function computeTriangleBounds(geo, fullBounds) {
     makeEmptyBounds(fullBounds);
     const posAttr = geo.attributes.position;
-    const index = geo.index ? geo.index.array : null;
+    const index2 = geo.index ? geo.index.array : null;
     const triCount = getTriCount(geo);
     const triangleBounds = new Float32Array(triCount * 6);
     const normalized = posAttr.normalized;
@@ -39053,10 +38625,10 @@ var __publicField = (obj, key, value) => {
       let ai = tri3 + 0;
       let bi = tri3 + 1;
       let ci = tri3 + 2;
-      if (index) {
-        ai = index[ai];
-        bi = index[bi];
-        ci = index[ci];
+      if (index2) {
+        ai = index2[ai];
+        bi = index2[bi];
+        ci = index2[ci];
       }
       if (!normalized) {
         ai = ai * stride + bufferOffset;
@@ -39273,7 +38845,7 @@ var __publicField = (obj, key, value) => {
     constructor() {
     }
   }
-  function partition(indirectBuffer, index, triangleBounds, offset, count, split) {
+  function partition(indirectBuffer, index2, triangleBounds, offset, count, split) {
     let left = offset;
     let right = offset + count - 1;
     const pos = split.pos;
@@ -39287,9 +38859,9 @@ var __publicField = (obj, key, value) => {
       }
       if (left < right) {
         for (let i = 0; i < 3; i++) {
-          let t0 = index[left * 3 + i];
-          index[left * 3 + i] = index[right * 3 + i];
-          index[right * 3 + i] = t0;
+          let t0 = index2[left * 3 + i];
+          index2[left * 3 + i] = index2[right * 3 + i];
+          index2[right * 3 + i] = t0;
         }
         for (let i = 0; i < 6; i++) {
           let tb = triangleBounds[left * 6 + i];
@@ -39303,7 +38875,7 @@ var __publicField = (obj, key, value) => {
       }
     }
   }
-  function partition_indirect(indirectBuffer, index, triangleBounds, offset, count, split) {
+  function partition_indirect(indirectBuffer, index2, triangleBounds, offset, count, split) {
     let left = offset;
     let right = offset + count - 1;
     const pos = split.pos;
@@ -40056,8 +39628,8 @@ var __publicField = (obj, key, value) => {
       for (let i = 0; i < 3; i++) {
         const axis = satAxes[i];
         const sb = satBounds[i];
-        const index = 1 << i;
-        const pi = points[index];
+        const index2 = 1 << i;
+        const pi = points[index2];
         axis.subVectors(minVec, pi);
         sb.setFromPoints(axis, points);
       }
@@ -40218,10 +39790,10 @@ var __publicField = (obj, key, value) => {
           for (let i2 = 0; i2 <= 1; i2++) {
             const nextIndex = (i + 1) % 3;
             const nextIndex2 = (i + 2) % 3;
-            const index = i1 << nextIndex | i2 << nextIndex2;
-            const index2 = 1 << i | i1 << nextIndex | i2 << nextIndex2;
-            const p1 = points[index];
-            const p2 = points[index2];
+            const index2 = i1 << nextIndex | i2 << nextIndex2;
+            const index22 = 1 << i | i1 << nextIndex | i2 << nextIndex2;
+            const p1 = points[index2];
+            const p2 = points[index22];
             const line1 = segments1[count];
             line1.set(p1, p2);
             const f1 = xyzFields[i];
@@ -40585,11 +40157,11 @@ var __publicField = (obj, key, value) => {
     let a = triOffset + 0;
     let b = triOffset + 1;
     let c2 = triOffset + 2;
-    const index = geo.index;
+    const index2 = geo.index;
     if (geo.index) {
-      a = index.getX(a);
-      b = index.getX(b);
-      c2 = index.getX(c2);
+      a = index2.getX(a);
+      b = index2.getX(b);
+      c2 = index2.getX(c2);
     }
     const { position, normal, uv, uv1 } = geo.attributes;
     const intersection = checkBufferGeometryIntersection(ray, position, normal, uv, uv1, a, b, c2, side);
@@ -40601,17 +40173,17 @@ var __publicField = (obj, key, value) => {
     }
     return null;
   }
-  function setTriangle(tri, i, index, pos) {
+  function setTriangle(tri, i, index2, pos) {
     const ta = tri.a;
     const tb = tri.b;
     const tc = tri.c;
     let i0 = i;
     let i1 = i + 1;
     let i2 = i + 2;
-    if (index) {
-      i0 = index.getX(i0);
-      i1 = index.getX(i1);
-      i2 = index.getX(i2);
+    if (index2) {
+      i0 = index2.getX(i0);
+      i1 = index2.getX(i1);
+      i2 = index2.getX(i2);
     }
     ta.x = pos.getX(i0);
     ta.y = pos.getY(i0);
@@ -40645,12 +40217,12 @@ var __publicField = (obj, key, value) => {
   }
   function iterateOverTriangles(offset, count, bvh, intersectsTriangleFunc, contained, depth, triangle3) {
     const { geometry } = bvh;
-    const { index } = geometry;
+    const { index: index2 } = geometry;
     const pos = geometry.attributes.position;
     for (let i = offset, l = count + offset; i < l; i++) {
       let tri;
       tri = i;
-      setTriangle(triangle3, tri * 3, index, pos);
+      setTriangle(triangle3, tri * 3, index2, pos);
       triangle3.needsUpdate = true;
       if (intersectsTriangleFunc(triangle3, tri, contained, depth)) {
         return true;
@@ -40689,10 +40261,10 @@ var __publicField = (obj, key, value) => {
         let maxy = -Infinity;
         let maxz = -Infinity;
         for (let i = 3 * offset, l = 3 * (offset + count); i < l; i++) {
-          let index = indexArr[i];
-          const x2 = posAttr.getX(index);
-          const y = posAttr.getY(index);
-          const z = posAttr.getZ(index);
+          let index2 = indexArr[i];
+          const x2 = posAttr.getX(index2);
+          const y = posAttr.getY(index2);
+          const z = posAttr.getZ(index2);
           if (x2 < minx)
             minx = x2;
           if (x2 > maxx)
@@ -40790,12 +40362,12 @@ var __publicField = (obj, key, value) => {
   }
   function iterateOverTriangles_indirect(offset, count, bvh, intersectsTriangleFunc, contained, depth, triangle3) {
     const { geometry } = bvh;
-    const { index } = geometry;
+    const { index: index2 } = geometry;
     const pos = geometry.attributes.position;
     for (let i = offset, l = count + offset; i < l; i++) {
       let tri;
       tri = bvh.resolveTriangleIndex(i);
-      setTriangle(triangle3, tri * 3, index, pos);
+      setTriangle(triangle3, tri * 3, index2, pos);
       triangle3.needsUpdate = true;
       if (intersectsTriangleFunc(triangle3, tri, contained, depth)) {
         return true;
@@ -40905,7 +40477,7 @@ var __publicField = (obj, key, value) => {
       const thisGeometry = bvh.geometry;
       const thisIndex = thisGeometry.index;
       const thisPos = thisGeometry.attributes.position;
-      const index = otherGeometry.index;
+      const index2 = otherGeometry.index;
       const pos = otherGeometry.attributes.position;
       const offset = OFFSET(nodeIndex32, uint32Array);
       const count = COUNT(nodeIndex16, uint16Array);
@@ -40939,8 +40511,8 @@ var __publicField = (obj, key, value) => {
           triangle$1.b.applyMatrix4(invertedMat$1);
           triangle$1.c.applyMatrix4(invertedMat$1);
           triangle$1.needsUpdate = true;
-          for (let i2 = 0, l2 = index.count; i2 < l2; i2 += 3) {
-            setTriangle(triangle2$1, i2, index, pos);
+          for (let i2 = 0, l2 = index2.count; i2 < l2; i2 += 3) {
+            setTriangle(triangle2$1, i2, index2, pos);
             triangle2$1.needsUpdate = true;
             if (triangle$1.intersectsTriangle(triangle2$1)) {
               return true;
@@ -40977,7 +40549,7 @@ var __publicField = (obj, key, value) => {
     obb$3.needsUpdate = true;
     const geometry = bvh.geometry;
     const pos = geometry.attributes.position;
-    const index = geometry.index;
+    const index2 = geometry.index;
     const otherPos = otherGeometry.attributes.position;
     const otherIndex = otherGeometry.index;
     const triangle3 = ExtendedTrianglePool.getPrimitive();
@@ -41029,7 +40601,7 @@ var __publicField = (obj, key, value) => {
                   triangle22.c.applyMatrix4(geometryToBvh);
                   triangle22.needsUpdate = true;
                   for (let i = offset, l = offset + count; i < l; i++) {
-                    setTriangle(triangle3, 3 * i, index, pos);
+                    setTriangle(triangle3, 3 * i, index2, pos);
                     triangle3.needsUpdate = true;
                     const dist = triangle3.distanceToTriangle(triangle22, tempTarget1, tempTarget2);
                     if (dist < closestDistance) {
@@ -41057,7 +40629,7 @@ var __publicField = (obj, key, value) => {
               triangle22.c.applyMatrix4(geometryToBvh);
               triangle22.needsUpdate = true;
               for (let i = offset, l = offset + count; i < l; i++) {
-                setTriangle(triangle3, 3 * i, index, pos);
+                setTriangle(triangle3, 3 * i, index2, pos);
                 triangle3.needsUpdate = true;
                 const dist = triangle3.distanceToTriangle(triangle22, tempTarget1, tempTarget2);
                 if (dist < closestDistance) {
@@ -41134,11 +40706,11 @@ var __publicField = (obj, key, value) => {
         for (let i = offset, l = offset + count; i < l; i++) {
           const t2 = 3 * bvh.resolveTriangleIndex(i);
           for (let j = 0; j < 3; j++) {
-            let index = t2 + j;
-            index = indexArr ? indexArr[index] : index;
-            const x2 = posAttr.getX(index);
-            const y = posAttr.getY(index);
-            const z = posAttr.getZ(index);
+            let index2 = t2 + j;
+            index2 = indexArr ? indexArr[index2] : index2;
+            const x2 = posAttr.getX(index2);
+            const y = posAttr.getY(index2);
+            const z = posAttr.getZ(index2);
             if (x2 < minx)
               minx = x2;
             if (x2 > maxx)
@@ -41311,7 +40883,7 @@ var __publicField = (obj, key, value) => {
       const thisGeometry = bvh.geometry;
       const thisIndex = thisGeometry.index;
       const thisPos = thisGeometry.attributes.position;
-      const index = otherGeometry.index;
+      const index2 = otherGeometry.index;
       const pos = otherGeometry.attributes.position;
       const offset = OFFSET(nodeIndex32, uint32Array);
       const count = COUNT(nodeIndex16, uint16Array);
@@ -41346,8 +40918,8 @@ var __publicField = (obj, key, value) => {
           triangle.b.applyMatrix4(invertedMat);
           triangle.c.applyMatrix4(invertedMat);
           triangle.needsUpdate = true;
-          for (let i2 = 0, l2 = index.count; i2 < l2; i2 += 3) {
-            setTriangle(triangle2, i2, index, pos);
+          for (let i2 = 0, l2 = index2.count; i2 < l2; i2 += 3) {
+            setTriangle(triangle2, i2, index2, pos);
             triangle2.needsUpdate = true;
             if (triangle.intersectsTriangle(triangle2)) {
               return true;
@@ -41384,7 +40956,7 @@ var __publicField = (obj, key, value) => {
     obb$1.needsUpdate = true;
     const geometry = bvh.geometry;
     const pos = geometry.attributes.position;
-    const index = geometry.index;
+    const index2 = geometry.index;
     const otherPos = otherGeometry.attributes.position;
     const otherIndex = otherGeometry.index;
     const triangle3 = ExtendedTrianglePool.getPrimitive();
@@ -41438,7 +41010,7 @@ var __publicField = (obj, key, value) => {
                   triangle22.needsUpdate = true;
                   for (let i = offset, l = offset + count; i < l; i++) {
                     const ti = bvh.resolveTriangleIndex(i);
-                    setTriangle(triangle3, 3 * ti, index, pos);
+                    setTriangle(triangle3, 3 * ti, index2, pos);
                     triangle3.needsUpdate = true;
                     const dist = triangle3.distanceToTriangle(triangle22, tempTarget1, tempTarget2);
                     if (dist < closestDistance) {
@@ -41467,7 +41039,7 @@ var __publicField = (obj, key, value) => {
               triangle22.needsUpdate = true;
               for (let i = offset, l = offset + count; i < l; i++) {
                 const ti = bvh.resolveTriangleIndex(i);
-                setTriangle(triangle3, 3 * ti, index, pos);
+                setTriangle(triangle3, 3 * ti, index2, pos);
                 triangle3.needsUpdate = true;
                 const dist = triangle3.distanceToTriangle(triangle22, tempTarget1, tempTarget2);
                 if (dist < closestDistance) {
@@ -41817,7 +41389,7 @@ var __publicField = (obj, key, value) => {
         indirect: Boolean(data.indirectBuffer),
         ...options
       };
-      const { index, roots, indirectBuffer } = data;
+      const { index: index2, roots, indirectBuffer } = data;
       const bvh = new MeshBVH(geometry, { ...options, [SKIP_GENERATION]: true });
       bvh._roots = roots;
       bvh._indirectBuffer = indirectBuffer || null;
@@ -41826,8 +41398,8 @@ var __publicField = (obj, key, value) => {
         if (indexAttribute === null) {
           const newIndex = new BufferAttribute(data.index, 1, false);
           geometry.setIndex(newIndex);
-        } else if (indexAttribute.array !== index) {
-          indexAttribute.array.set(index);
+        } else if (indexAttribute.array !== index2) {
+          indexAttribute.array.set(index2);
           indexAttribute.needsUpdate = true;
         }
       }
@@ -42313,9 +41885,9 @@ var __publicField = (obj, key, value) => {
       }
     }
     dispose() {
-      const { index, position, bvhBounds, bvhContents } = this;
-      if (index)
-        index.dispose();
+      const { index: index2, position, bvhBounds, bvhContents } = this;
+      if (index2)
+        index2.dispose();
       if (position)
         position.dispose();
       if (bvhBounds)
@@ -42869,6 +42441,24 @@ bool bvhIntersectFirstHit(
   }`
   );
   let lensMaterial;
+  let orbitalMaterial;
+  const defaultOrbitalMaterial = new MeshPhysicalMaterial({
+    metalness: 0,
+    roughness: 0.05,
+    ior: 1,
+    opacity: 0.6,
+    clearcoat: 0,
+    color: new Color(16777215),
+    transparent: true,
+    shadowSide: BackSide,
+    depthWrite: true,
+    map: null,
+    alphaMap: null,
+    aoMap: null,
+    roughnessMap: null,
+    metalnessMap: null,
+    normalMap: null
+  });
   let envMap;
   const positions = [0, 0.4, 0.7, 1];
   const opacities = [0.85, 0.62, 0.3, 0];
@@ -42909,9 +42499,11 @@ bool bvhIntersectFirstHit(
       __publicField2(this, "canvasSize");
       __publicField2(this, "isInitialised");
       __publicField2(this, "orgId");
+      __publicField2(this, "textureLoader");
       this.scene = new Scene();
       this.canvasSize = new Vector2();
       this.isInitialised = false;
+      this.textureLoader = new TextureLoader();
       this.orgId = "";
     }
     async intialize() {
@@ -43006,51 +42598,87 @@ bool bvhIntersectFirstHit(
       });
     }
     async loadFirstFrame(orgId, frame) {
-      var _a2, _b2;
       if (frame && orgId) {
         const apiRes = await this.downloadModel(orgId, frame._id);
-        const specialLens = ((_a2 = frame.customisation) == null ? void 0 : _a2.length) == 0;
-        const includedLens = specialLens ? null : (_b2 = frame.customisation) == null ? void 0 : _b2.find((x2) => x2.type == "Lens");
-        await this.renderModel(apiRes.asset.cloudfrontUrl, specialLens, apiRes.decryptionKey).then(() => {
-          if (includedLens) {
-            this.setupLensMaterial(
-              includedLens
-            );
-          }
+        const customLensMaterial = frame.customisation.find((x2) => x2.type == "Lens");
+        const customOrbitalMaterial = frame.customisation.find((x2) => x2.type == "Orbital");
+        await this.renderModel(apiRes.asset.cloudfrontUrl, false, apiRes.decryptionKey).then(async () => {
+          return new Promise(async (res, rej) => {
+            if (customLensMaterial) {
+              this.setupLensMaterial(customLensMaterial);
+              res();
+            } else {
+              res();
+            }
+            if (customOrbitalMaterial) {
+              await this.setupOrbitalMaterial(customOrbitalMaterial).then(() => {
+                res();
+              });
+            } else {
+              res();
+            }
+          });
         });
       } else {
         return;
       }
     }
-    async changeFrame(orgId, frame, selectedLens) {
+    async changeFrame(orgId, frame, selectedCustomisations) {
       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";
+        const selectedLens = selectedCustomisations.find((x2) => x2.type == "Lens");
+        const selectedOrbital = selectedCustomisations.find((x2) => x2.type == "Orbital");
+        const customLensMaterial = frame.customisation.find((x2) => x2.type == "Lens");
+        const customOrbitalMaterial = frame.customisation.find((x2) => x2.type == "Orbital");
+        const renderAsIs = customLensMaterial == null && 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);
+          return new Promise(async (res, rej) => {
+            if (selectedLens.sku == "lens-default") {
+              if (customLensMaterial) {
+                this.setupLensMaterial(customLensMaterial);
+                res();
+              } else {
+                res();
+              }
+            } else {
+              this.setupLensMaterial(selectedLens);
+              res();
             }
-          } else {
-            this.setupLensMaterial(selectedLens);
-          }
+            if ((selectedOrbital == null ? void 0 : selectedOrbital.sku) == "orbital-default") {
+              if (customOrbitalMaterial) {
+                await this.setupOrbitalMaterial(customOrbitalMaterial).then(() => {
+                  res();
+                });
+              }
+            } else {
+              await this.setupOrbitalMaterial(selectedOrbital).then(() => {
+                res();
+              });
+            }
+          });
         });
       }
     }
-    async changeLens(lens, orgId, reloadNeeded, frame) {
+    async changeLens(customisations, orgId, reloadNeeded, frame) {
       return new Promise((res, rej) => {
         if (reloadNeeded) {
-          this.changeFrame(orgId, frame, lens).then(() => {
+          this.changeFrame(orgId, frame, customisations).then(() => {
             res();
           });
         } else {
+          const lens = customisations.find((x2) => x2.type == "Lens");
           this.setupLensMaterial(lens);
           res();
         }
       });
     }
+    async changeOrbital(orbital) {
+      return new Promise(async (res, rej) => {
+        await this.setupOrbitalMaterial(orbital).then(() => {
+          res();
+        });
+      });
+    }
     async renderModel(modelContent, renderAsIs, decryptionKey) {
       const loader = new GLTFLoader();
       if (modelContent) {
@@ -43197,6 +42825,14 @@ bool bvhIntersectFirstHit(
               lensMaterial.needsUpdate = true;
             }
           }
+          if (node.material && node.material.name.toLowerCase() == "frame-stems") {
+            orbitalMaterial = defaultOrbitalMaterial;
+            orbitalMaterial.envMap = this.scene.environment;
+            node.material = orbitalMaterial;
+            node.matrixAutoUpdate = true;
+            orbitalMaterial.matrixAutoUpdate = true;
+            orbitalMaterial.needsUpdate = true;
+          }
           if (node.material && node.name === "Diamonds") {
             this.initGemstoneDependencies();
             gemstoneMaterial.uniforms.bvh.value = new MeshBVHUniformStruct();
@@ -43248,12 +42884,12 @@ bool bvhIntersectFirstHit(
         } else if (selectedLens.direction == "tb") {
           const gradientColors = selectedLens.gradientColors;
           gu.uAlpha.value = true;
-          let index = 0;
+          let index2 = 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++;
+            gu.colors.value[index2] = new Color(gradientColors[index2].color);
+            gu.positions.value[index2] = gradientColors[index2].position;
+            gu.opacities.value[index2] = gradientColors[index2].alpha;
+            index2++;
           });
         }
         if (selectedLens.finish == "MIRBLKHMC") {
@@ -43270,6 +42906,83 @@ bool bvhIntersectFirstHit(
         lensMaterial.metalness = selectedLens.metalness;
       }
     }
+    async downloadTexture(url) {
+      let tex;
+      return await this.textureLoader.loadAsync(url).then((texture) => {
+        texture.colorSpace = SRGBColorSpace;
+        texture.flipY = false;
+        texture.magFilter = NearestFilter;
+        texture.wrapS = ClampToEdgeWrapping;
+        texture.wrapT = ClampToEdgeWrapping;
+        tex = texture;
+      }).then(() => tex);
+    }
+    resetOrbitalMaterial(mat) {
+      mat.metalness = 0;
+      mat.roughness = 0.05;
+      mat.ior = 1;
+      mat.opacity = 1;
+      mat.clearcoat = 0;
+      mat.color = new Color(16777215);
+      mat.transparent = false;
+      mat.shadowSide = BackSide;
+      mat.depthWrite = true;
+      mat.map = null;
+      mat.alphaMap = null;
+      mat.aoMap = null;
+      mat.roughnessMap = null;
+      mat.metalnessMap = null;
+      mat.normalMap = null;
+      mat.transmission = 0;
+    }
+    async setupOrbitalMaterial(selectedOrbital) {
+      if (orbitalMaterial) {
+        this.resetOrbitalMaterial(orbitalMaterial);
+        if (selectedOrbital.texture) {
+          if (selectedOrbital.texture.baseColor) {
+            await this.downloadTexture(selectedOrbital.texture.baseColor).then((texture) => {
+              orbitalMaterial.map = texture;
+            });
+          }
+          if (selectedOrbital.texture.opacity) {
+            await this.downloadTexture(selectedOrbital.texture.opacity).then((texture) => {
+              orbitalMaterial.alphaMap = texture;
+            });
+          }
+          if (selectedOrbital.texture.thickness) {
+            await this.downloadTexture(selectedOrbital.texture.thickness).then((texture) => {
+              orbitalMaterial.thicknessMap = texture;
+            });
+          }
+          if (selectedOrbital.texture.orm) {
+            await this.downloadTexture(selectedOrbital.texture.orm).then((texture) => {
+              orbitalMaterial.aoMap = texture;
+              orbitalMaterial.roughnessMap = texture;
+              orbitalMaterial.metalnessMap = texture;
+            });
+          } else {
+            orbitalMaterial.roughness = selectedOrbital.roughness;
+            orbitalMaterial.metalness = selectedOrbital.metalness;
+          }
+        } else {
+          orbitalMaterial.color = new Color(selectedOrbital.color);
+          orbitalMaterial.roughness = selectedOrbital.roughness;
+          orbitalMaterial.metalness = selectedOrbital.metalness;
+        }
+        if (selectedOrbital.ior > 1) {
+          orbitalMaterial.ior = selectedOrbital.ior;
+          orbitalMaterial.transmission = 1;
+          orbitalMaterial.transparent = true;
+          orbitalMaterial.thickness = 0.05;
+        } else {
+          orbitalMaterial.ior = 1;
+          orbitalMaterial.transmission = 0;
+          orbitalMaterial.transparent = false;
+          orbitalMaterial.opacity = selectedOrbital.opacity;
+        }
+        orbitalMaterial.clearcoat = 0;
+      }
+    }
     setupAndRenderScene() {
       if (!this.camera || !this.renderer)
         return;
@@ -43465,7 +43178,7 @@ bool bvhIntersectFirstHit(
         this.customRenderer.setupAndRenderScene();
       }
     }
-    loadFirstFrame(orgId, assetDetails) {
+    loadFirstFrame(orgId, assetDetails, customisationArr) {
       return new Promise((res, rej) => {
         this.customRenderer.loadFirstFrame(orgId, assetDetails).then(() => {
           res(1);
@@ -43474,11 +43187,14 @@ bool bvhIntersectFirstHit(
         });
       });
     }
-    changeFrame(orgId, frame, lens) {
-      return this.customRenderer.changeFrame(orgId, frame, lens);
+    changeFrame(orgId, frame, customisations) {
+      return this.customRenderer.changeFrame(orgId, frame, customisations);
     }
-    changeLens(lens, orgId, reloadNeeded, frame) {
-      return this.customRenderer.changeLens(lens, orgId, reloadNeeded, frame);
+    changeLens(customisations, orgId, reloadNeeded, frame) {
+      return this.customRenderer.changeLens(customisations, orgId, reloadNeeded, frame);
+    }
+    changeOrbital(orbital) {
+      return this.customRenderer.changeOrbital(orbital);
     }
   }
   class DOMService {
@@ -43519,14 +43235,17 @@ bool bvhIntersectFirstHit(
       this.customisationArr = param.data.customisation;
       this.prepareDOM();
       await this.rendererService.Init();
-      await this.rendererService.loadFirstFrame(this.orgId, this.assetDetails);
+      await this.rendererService.loadFirstFrame(this.orgId, this.assetDetails, this.customisationArr);
       return this;
     }
-    changeFrame(frame, lens) {
-      return this.rendererService.changeFrame(this.orgId, frame, lens);
+    changeFrame(frame, customisations) {
+      return this.rendererService.changeFrame(this.orgId, frame, customisations);
+    }
+    changeLens(customisations, reloadNeeded, frame) {
+      return this.rendererService.changeLens(customisations, this.orgId, reloadNeeded, frame);
     }
-    changeLens(lens, reloadNeeded, frame) {
-      return this.rendererService.changeLens(lens, this.orgId, reloadNeeded, frame);
+    changeOrbital(orbital) {
+      return this.rendererService.changeOrbital(orbital);
     }
     unmount() {
       if (this.containerElement) {
@@ -43577,12 +43296,583 @@ bool bvhIntersectFirstHit(
     }
   }
   window.ThreeDConfigurator = ThreeDConfigurator;
+  const MainContainer$1 = "";
+  const index$3 = "";
+  function FramePalette({
+    frameList,
+    selectedFrame,
+    modelLoading,
+    onChangeFrame
+  }) {
+    const isMobileView = window.innerWidth <= 576;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "sprie-config-palette",
+        style: {
+          padding: "0 4rem 1.6rem 4rem",
+          marginTop: isMobileView ? "1rem" : "0"
+        },
+        children: frameList == null ? void 0 : frameList.map((e) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-palette-img-box", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              style: {
+                border: "0",
+                cursor: modelLoading ? "default" : "pointer",
+                opacity: (selectedFrame == null ? void 0 : selectedFrame._id) === e._id ? "1" : ".6"
+              },
+              onClick: () => onChangeFrame(e),
+              disabled: modelLoading,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
+                {
+                  src: e.variantImage,
+                  alt: e.name + "image",
+                  width: 60,
+                  height: 60,
+                  style: {
+                    transform: (selectedFrame == null ? void 0 : selectedFrame._id) === e._id ? "scale(1.2,1.2)" : "scale(1,1)"
+                  }
+                }
+              )
+            }
+          ),
+          (selectedFrame == null ? void 0 : selectedFrame._id) === e._id && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "sprie-config-palette-img-text", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sprie-config-palette-imgName", children: e.name }) })
+        ] }, e._id))
+      }
+    );
+  }
+  function LensPalette({
+    lensList,
+    selectedLens,
+    modelLoading,
+    onChangeLens
+  }) {
+    const isMobileView = window.innerWidth <= 576;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "sprie-config-palette",
+        style: {
+          padding: "0 1.2rem 1.6rem 1.2rem",
+          marginTop: isMobileView ? "1rem" : "0",
+          gap: isMobileView ? ".3rem" : "1rem"
+        },
+        children: lensList == null ? void 0 : lensList.map((e) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-palette-img-box", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              style: {
+                border: "0",
+                cursor: modelLoading ? "default" : "pointer",
+                opacity: (selectedLens == null ? void 0 : selectedLens._id) === e._id ? "1" : ".6"
+              },
+              onClick: () => onChangeLens(e),
+              disabled: modelLoading,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
+                {
+                  src: e.thumbnail,
+                  alt: e.name + "image",
+                  width: isMobileView ? 45 : 60,
+                  height: isMobileView ? 45 : 60,
+                  style: {
+                    border: (selectedLens == null ? void 0 : selectedLens._id) === e._id ? "1px solid #9d9b9c" : "0",
+                    borderRadius: "50%",
+                    padding: "1px"
+                  }
+                }
+              )
+            }
+          ),
+          (selectedLens == null ? void 0 : selectedLens._id) === e._id && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "p",
+            {
+              className: "sprie-config-palette-img-text",
+              style: { bottom: "-1.2rem" },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sprie-config-palette-imgName", children: e.name })
+            }
+          )
+        ] }, e._id))
+      }
+    );
+  }
+  const index$2 = "";
+  function LaserEngraving({ heading, onChecked, onTextAdded }) {
+    const [input, setInput] = reactExports.useState("");
+    const [isChecked, setIsChecked] = reactExports.useState(false);
+    reactExports.useEffect(() => {
+      onChecked(isChecked);
+    });
+    reactExports.useEffect(() => {
+      onTextAdded(input);
+    }, [input]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-engraving-block", style: { marginTop: ".5rem" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: ".8rem" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "checkbox",
+            className: "sprie-config-engraving-checkbox",
+            onChange: (e) => {
+              setIsChecked(e.target.checked);
+            },
+            checked: isChecked
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { style: { fontSize: ".9rem", color: "#4d4d4d", fontWeight: "500" }, children: [
+          "Add ",
+          "Laser Engraving",
+          " ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontWeight: "400" }, children: "(OPTIONAL)" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-engraving-inputField-block", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "text",
+            className: "sprie-config-engraving-inputField",
+            placeholder: "ADD CUSTOM TEXT",
+            value: input,
+            onChange: (e) => setInput(e.target.value),
+            maxLength: 15,
+            style: { padding: "0.7rem" },
+            disabled: !isChecked
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sprie-config-engraving-inputInfo", children: `${input.length}/15 characters` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "#", className: "sprie-config-engraving-link", children: "About Custom Laser Engraving" })
+      ] })
+    ] });
+  }
+  const index$1 = "";
+  function StepTracker({
+    totalSteps,
+    currentStep
+  }) {
+    const isMobileView = window.innerWidth <= 576;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "step-tracker-block",
+        style: {
+          margin: isMobileView ? "1rem 0" : ".7rem 0 1rem 0",
+          paddingBottom: "1.5rem"
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "step-tracker", children: Array.from({ length: totalSteps }).map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: `step-circle ${index2 + 1 === currentStep ? "active" : ""}`
+          },
+          index2
+        )) })
+      }
+    );
+  }
+  function CarouselHeader({
+    nextSlide,
+    previousSlide,
+    currentIndex,
+    stepsName,
+    isLastStep
+  }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "carousel-header", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          className: "carousel-btn prev",
+          onClick: previousSlide,
+          style: { visibility: currentIndex !== 0 ? "visible" : "hidden" },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "i",
+            {
+              className: "arrow left-arrow",
+              style: {
+                padding: ".25rem"
+                /* 4px */
+              }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "step-syntax", children: `STEP ${currentIndex + 1}: ` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-syntax", children: stepsName[currentIndex] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          className: "carousel-btn next",
+          onClick: nextSlide,
+          style: {
+            visibility: isLastStep ? "hidden" : "visible"
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "i",
+            {
+              className: "arrow right-arrow",
+              style: {
+                padding: ".25rem"
+                /* 4px */
+              }
+            }
+          )
+        }
+      )
+    ] });
+  }
+  function Carousel({
+    setShowAddToCart,
+    children
+  }) {
+    var _a2;
+    const [currentIndex, setCurrentIndex] = reactExports.useState(0);
+    const carouselElements = React.Children.toArray(children);
+    const isLastStep = !(currentIndex !== carouselElements.length - 1);
+    const stepsName = (_a2 = carouselElements.map((child) => child)) == null ? void 0 : _a2.map((e) => e.props.heading);
+    const goToPreviousSlide = () => {
+      setCurrentIndex(
+        (prevIndex) => prevIndex === 0 ? React.Children.count(children) - 1 : prevIndex - 1
+      );
+    };
+    const goToNextSlide = () => {
+      setCurrentIndex(
+        (prevIndex) => prevIndex === React.Children.count(children) - 1 ? 0 : prevIndex + 1
+      );
+    };
+    reactExports.useEffect(() => {
+      if (isLastStep) {
+        setShowAddToCart(true);
+      } else {
+        setShowAddToCart(false);
+      }
+    }, [isLastStep, setShowAddToCart]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "carousel", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CarouselHeader,
+        {
+          nextSlide: goToNextSlide,
+          previousSlide: goToPreviousSlide,
+          currentIndex,
+          stepsName,
+          isLastStep
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        StepTracker,
+        {
+          totalSteps: stepsName == null ? void 0 : stepsName.length,
+          currentStep: currentIndex + 1
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "carousel-container", children: carouselElements.map((child, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "carousel-item",
+          style: {
+            transform: `translateX(-${currentIndex * 100}%)`
+          },
+          children: child
+        },
+        index2
+      )) })
+    ] });
+  }
+  const index = "";
+  function AddToCartBtn() {
+    const [isChecked, setIsChecked] = reactExports.useState(false);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-add-to-cart-block", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          htmlFor: "Sprie-Config-return-policy-checkbox",
+          id: "Sprie-Config-return-policy-label",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                type: "checkbox",
+                id: "Sprie-Config-return-policy-checkbox",
+                name: "sprie-config-return-policy-checkbox",
+                onChange: (e) => setIsChecked(e.target.checked),
+                checked: isChecked
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
+              "I agree this customized Item cannot be returned or exchanged.",
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "red" }, children: "*" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sprie-config-add-to-cart-btn", disabled: !isChecked, children: "ADD TO CART" })
+    ] });
+  }
+  function OrbitalPalette({
+    orbitalList,
+    selectedOrbital,
+    modelLoading,
+    onChangeOrbital
+  }) {
+    const isMobileView = window.innerWidth <= 576;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "sprie-config-palette",
+        style: {
+          padding: "0 1.2rem 1.6rem 1.2rem",
+          marginTop: isMobileView ? "1rem" : "0",
+          gap: isMobileView ? ".3rem" : "1rem"
+        },
+        children: orbitalList == null ? void 0 : orbitalList.map((e) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-palette-img-box", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              style: {
+                border: "0",
+                cursor: modelLoading ? "default" : "pointer",
+                opacity: (selectedOrbital == null ? void 0 : selectedOrbital._id) === e._id ? "1" : ".6"
+              },
+              onClick: () => onChangeOrbital(e),
+              disabled: modelLoading,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
+                {
+                  src: e.thumbnail,
+                  alt: e.name + "image",
+                  width: isMobileView ? 45 : 60,
+                  height: isMobileView ? 45 : 60,
+                  style: {
+                    border: (selectedOrbital == null ? void 0 : selectedOrbital._id) === e._id ? "1px solid #9d9b9c" : "0",
+                    borderRadius: "50%",
+                    padding: "1px"
+                  }
+                }
+              )
+            }
+          ),
+          (selectedOrbital == null ? void 0 : selectedOrbital._id) === e._id && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "p",
+            {
+              className: "sprie-config-palette-img-text",
+              style: { bottom: "-1.2rem" },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sprie-config-palette-imgName", children: e.name })
+            }
+          )
+        ] }, e._id))
+      }
+    );
+  }
+  const ditaLogo = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMzIwLjAwMDAwMHB0IiBoZWlnaHQ9IjY2LjAwMDAwMHB0IiB2aWV3Qm94PSIwIDAgMzIwLjAwMDAwMCA2Ni4wMDAwMDAiCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDY2LjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIKZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTAgNjUxIGMwIC02IDkgLTExIDIxIC0xMSAxMSAwIDI5IC01IDQwIC0xMCAxOCAtMTAgMTkgLTI0IDE5IC0zMDAKMCAtMjc2IC0xIC0yOTAgLTE5IC0zMDAgLTExIC01IC0yOSAtMTAgLTQwIC0xMCAtMTIgMCAtMjEgLTQgLTIxIC0xMCAwIC0xNAo0NDUgLTEzIDUxMiAxIDEwNyAyMyAxOTAgODUgMjM5IDE3OSAyMCAzNyAyNCA2MCAyNCAxMzUgMCA3OCAtNCA5NyAtMjggMTQ3Ci0zNCA3MCAtMTAwIDEzMCAtMTc2IDE2MCAtNTIgMjEgLTc1IDIzIC0zMTMgMjYgLTE4MCAyIC0yNTggMCAtMjU4IC03eiBtNDcwCi0zNiBjMTUgLTggMzggLTI3IDQ5IC00MSAyMCAtMjUgMjEgLTM5IDIxIC0yMzggMCAtMTk0IC0yIC0yMTQgLTIwIC0yNDQgLTExCi0xOCAtMzYgLTQwIC01NSAtNDggLTQ2IC0xOSAtMTM1IC0xOCAtMTYzIDIgLTIyIDE1IC0yMiAxNyAtMjIgMzAwIGwwIDI4NCA4MAowIGM1MiAwIDkxIC01IDExMCAtMTV6Ii8+CjxwYXRoIGQ9Ik05ODAgNjUwIGMwIC01IDExIC0xMCAyNCAtMTAgNTUgMCA1NiAtNyA1NiAtMzEwIDAgLTMwMyAtMSAtMzEwIC01NgotMzEwIC0xMyAwIC0yNCAtNCAtMjQgLTEwIDAgLTYgNjcgLTEwIDE4MCAtMTAgMTEzIDAgMTgwIDQgMTgwIDEwIDAgNiAtMTEgMTAKLTIzIDEwIC0xMyAwIC0zMSA4IC00MCAxOCAtMTUgMTYgLTE3IDUyIC0xNyAyOTQgMCAyNTQgMSAyNzYgMTggMjkxIDEwIDEwIDI4CjE3IDQwIDE3IDEyIDAgMjIgNSAyMiAxMCAwIDYgLTY3IDEwIC0xODAgMTAgLTExMyAwIC0xODAgLTQgLTE4MCAtMTB6Ii8+CjxwYXRoIGQ9Ik0xNTI2IDYwMSBjLTI1IC0zMyAtNDYgLTY0IC00NiAtNzAgMCAtNiAyNCA1IDU0IDI0IDUzIDM0IDE1OSA3NQoxOTQgNzUgMTAgMCAyOCAtMTAgNDAgLTIzIDIxIC0yMyAyMiAtMzAgMjIgLTI4OSAwIC0yODkgLTIgLTI5OCAtNTYgLTI5OCAtMTMKMCAtMjQgLTQgLTI0IC0xMCAwIC02IDY3IC0xMCAxODAgLTEwIDExMyAwIDE4MCA0IDE4MCAxMCAwIDYgLTExIDEwIC0yNCAxMAotNTQgMCAtNTYgOSAtNTYgMjk0IDAgMjUxIDEgMjY1IDIxIDI5MCAxMSAxNCAzMCAyNiA0MiAyNiAzNyAtMSAxNTMgLTQ2IDIwMQotNzggMjUgLTE3IDQ2IC0yNyA0NiAtMjEgMCA2IC0yMSAzNyAtNDYgNzAgbC00NyA1OSAtMzE3IDAgLTMxNyAwIC00NyAtNTl6Ii8+CjxwYXRoIGQ9Ik0yNDU1IDY1MCBjMyAtNSAxNSAtMTAgMjYgLTEwIDMwIDAgNjUgLTI3IDk3IC03NiBsMjkgLTQzIC05MCAtMTc4CmMtMTM2IC0yNzAgLTE2MyAtMzEzIC0xOTggLTMyMCAtNTkgLTExIC0yNiAtMjMgNjYgLTIzIDg5IDAgMTIxIDExIDc1IDI1IC0yOQo5IC0yNiA1NSAxMCAxMjYgbDMxIDYwIDE1MSAtMyAxNTEgLTMgMzkgLTczIGMzMCAtNTkgMzYgLTc3IDI4IC05MyAtNiAtMTAKLTIwIC0xOSAtMzAgLTE5IC0xMSAwIC0yMCAtNCAtMjAgLTEwIDAgLTYgNzAgLTEwIDE5MCAtMTAgMTIwIDAgMTkwIDQgMTkwIDEwCjAgNiAtMTEgMTAgLTI0IDEwIC0xNCAwIC0zNiAxMCAtNTAgMjMgLTE1IDEyIC0xMDYgMTU1IC0yMDQgMzE3IGwtMTc3IDI5NQotMTQ4IDMgYy0xMDAgMiAtMTQ2IC0xIC0xNDIgLTh6IG0yNTggLTM5OCBjLTM1IC0yIC05MiAtMiAtMTI3IDAgbC02NCAzIDYwCjExMyA2MCAxMTMgNjcgLTExMyA2NyAtMTEzIC02MyAtM3oiLz4KPC9nPgo8L3N2Zz4K";
+  const deg360_Icon = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjMuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA4ODYgNjk4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA4ODYgNjk4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzkxODQ3RTt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04NDAuMDEsNDEuMDFjLTM2LjcxLTMxLjU2LTEwOC45NC01Ny45Ny0yNDQuNi00LjU2Yy0yMC40Nyw4LjA2LTQxLjQ2LDE3LjU3LTYyLjc1LDI4LjM2CgljMTkuMzgtNC42Niw0MzEuNTItMTAxLDE3NS42MSwxOTkuNDJsLTAuMDQsMGMtMjUuODUsMzUuNS01Ny44Miw3Mi4wOC05NC40MiwxMDcuOTdsLTMyLjcyLTI4LjE0bC02LjQ0LDE0MS43NmwxNjQuODQtNS41NwoJbC00NC4zNC0zOC4xMmM2NS41NC02My43NCwxMTcuODUtMTI5Ljk0LDE1MC4yMi0xOTAuNzdDOTA3LjQ0LDEzNC42OSw4NzYuNzEsNzIuNTcsODQwLjAxLDQxLjAxeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTYyLjE3LDQyNS42N2MtNjQuNDcsNDYuMi0xMzIuNjcsODYuMjItMTk4LjQzLDExNi43NmMtMC4wOSwwLjA0LTAuMTcsMC4wOC0wLjI1LDAuMTMKCUMtMTkuMjcsNzMwLjcyLDczLjg2LDQ0MS4xMyw4OC4wNyw0MDEuNDVsLTIuMDktMS41MWMtMTQuNjcsMTcuOTMtMjcuNiwzNS42MS0zOC41Myw1Mi44NEMtMjQuNCw1NjYsMTEuMTYsNjI2LjI3LDUzLjY0LDY1Ni44OQoJYzQyLjQ4LDMwLjYzLDEyNi4wNyw1Ni4yNSwyODMuMDUsNC40M2M5OS0zMi42OSwyMDguNTgtODkuNywzMTAuMDYtMTYxLjE5bC04My43Ny0wLjQ2TDU2Mi4xNyw0MjUuNjd6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMTIuOSwxOTcuNzRjMCwzNS41NC0yNS43Myw1Mi44MS00MS45OCw1Mi44MXYxLjAxYzIwLjY1LDAsNDYuMzcsMTUuOTEsNDYuMzcsNTEuNDUKCWMwLDM3LjkxLTM0LjE5LDYzLjk4LTgzLjYxLDYzLjk4Yy00My42NywwLTcxLjA5LTE3LjI3LTgzLjk1LTU0Ljg0bDQyLjMxLTE4Ljk2YzQuNzQsMjQuMzcsMTcuMjYsMzYuMjIsNDEuOTgsMzYuMjIKCWMyMy43LDAsMzcuOTEtMTIuODcsMzcuNTctMzIuNWMtMC4zNC0yMC45OS0xMy4yLTI4Ljc4LTM5Ljk0LTI4Ljc4aC0xMS4xN3YtMzIuNWg5LjQ4YzI0LjM3LDAsMzYuNTYtOS44MiwzNi41Ni0yOS43OQoJYzAuMzQtMjAuNjUtMTEuNTEtMzEuNDgtMzEuODItMzEuNDhjLTIwLjY1LDAtMzMuODUsMTAuODMtMzYuOSwzMS44MmwtNDEuNjQtMTUuMjNjOC44LTM2LjksNDAuNjItNTQuMTYsODAuNTYtNTQuMTYKCUMxODUuODIsMTM2LjgxLDIxMi45LDE2Mi41NCwyMTIuOSwxOTcuNzR6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zOTYuOTgsMTg1LjU2bC0zOS4yNywxOC4yOGMtNS40Mi0xNy42LTE3LjI2LTI4LjQzLTM4LjkzLTI4LjQzYy0yOC43OCwwLTQ5LjA4LDMwLjgtNDkuMDgsNzYuMTZ2NS43NmgxLjAxCgljNy40NS0yMy4wMiwzMS4xNC0zMy41MSw1Ni44Ny0zMy41MWM0Mi45OSwwLDczLjEyLDI3LjQyLDczLjEyLDcwLjQxYzAsNDQuMzQtMzAuOCw3Mi43OC04Mi42LDcyLjc4CgljLTU4LjIzLDAtOTAuMzgtNDIuOTktOTAuMzgtMTE1LjA5YzAtNzcuNTIsNDAuNjItMTE1LjA5LDk0LjExLTExNS4wOUMzNTcuNzEsMTM2LjgxLDM4NC4xMiwxNTAuMzUsMzk2Ljk4LDE4NS41NnogTTI4MC41MywyOTMuNTQKCWMwLDIyLjM0LDE1LjIzLDM2LjIyLDM4LjI1LDM2LjIyYzI0LjAzLDAsMzcuOTEtMTMuMiwzNy45MS0zNi4yMmMwLTIyLTEzLjg4LTM1LjU0LTM3LjkxLTM1LjU0CglDMjk1Ljc2LDI1OCwyODAuNTMsMjcyLjIyLDI4MC41MywyOTMuNTR6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MTQuNzgsMjUxLjkxYzAtNzUuNDksMzAuMTMtMTE1LjA5LDg5LjM3LTExNS4wOXM4OS4zNywzOS42LDg5LjM3LDExNS4wOVM1NjMuMzgsMzY3LDUwNC4xNSwzNjcKCVM0MTQuNzgsMzI3LjM5LDQxNC43OCwyNTEuOTF6IE01NDYuOCwyNTEuOTFjMC01My4xNS0xMy44OC03Ny41Mi00Mi42NS03Ny41MmMtMjguNzcsMC00Mi42NSwyNC4zNy00Mi42NSw3Ny41MgoJYzAsNTMuMTUsMTMuODgsNzcuNTIsNDIuNjUsNzcuNTJDNTMyLjkyLDMyOS40Myw1NDYuOCwzMDUuMDUsNTQ2LjgsMjUxLjkxeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTg4LjIsMTI4LjEzYzAtMTguNjMsMTMuNzgtMzIuMDIsMzIuOTktMzIuMDJjMTkuMjEsMCwzMi45OSwxMy4zOSwzMi45OSwzMi4wMnMtMTMuNzgsMzIuMDItMzIuOTksMzIuMDIKCUM2MDEuOTcsMTYwLjE0LDU4OC4yLDE0Ni43Niw1ODguMiwxMjguMTN6IE02NDAuNTksMTI4LjEzYzAtMTEuMjUtOC4xNS0xOS40LTE5LjQtMTkuNHMtMTkuNCw4LjE1LTE5LjQsMTkuNHM4LjE1LDE5LjQsMTkuNCwxOS40CglTNjQwLjU5LDEzOS4zOCw2NDAuNTksMTI4LjEzeiIvPgo8L3N2Zz4K";
+  function MainContainer({
+    orgName,
+    customEvent,
+    apiService: apiService2,
+    frameList,
+    lensList,
+    orbitalList,
+    showOrbitalList,
+    viewerOnly,
+    domService,
+    ThreeDConfigurator: ThreeDConfigurator2
+  }) {
+    const [selectedFrame, setSelectedFrame] = reactExports.useState();
+    const [selectedLens, setSelectedLens] = reactExports.useState();
+    const [selectedOrbital, setSelectedOrbital] = reactExports.useState();
+    const [modelLoading, setModelLoading] = reactExports.useState(false);
+    const [showAddToCart, setShowAddToCart] = reactExports.useState(false);
+    const domInstance = reactExports.useRef();
+    domInstance.current = domService;
+    const isMobileView = window.innerWidth <= 576;
+    const windowHeight = window.innerHeight / 16;
+    const occupiedHeight = isMobileView ? showAddToCart ? (336 + 84) / 16 : (280 + 84) / 16 : (240 + 88) / 16;
+    const onChangeFrame = async (frame, reload) => {
+      if (frame._id === (selectedFrame == null ? void 0 : selectedFrame._id) && !reload) {
+        return;
+      }
+      if (!domInstance.current)
+        return;
+      setModelLoading(true);
+      domInstance.current.changeFrame(frame, [selectedLens, selectedOrbital]).then(() => {
+        setModelLoading(false);
+      });
+      setSelectedFrame(frame);
+    };
+    const getLensInfo = (frame) => {
+      const hasSpecialDefaultLens = (frame == null ? void 0 : frame.customisation.length) == 0;
+      const includedLens = hasSpecialDefaultLens ? null : frame == null ? void 0 : frame.customisation.find((x2) => x2.type == "Lens");
+      return includedLens;
+    };
+    const getOrbitalInfo = (frame) => {
+      const includedOrbital = frame == null ? void 0 : frame.customisation.find((x2) => x2.type == "Orbital");
+      return includedOrbital;
+    };
+    const onChangeLens = async (requestedLens) => {
+      if (!domInstance.current) {
+        return;
+      }
+      if (requestedLens == selectedLens) {
+        return;
+      }
+      const isDefaultRequested = requestedLens.sku == "lens-default";
+      const frameDefaultLens = getLensInfo(selectedFrame);
+      if (!frameDefaultLens && isDefaultRequested) {
+        setModelLoading(true);
+        domInstance.current.changeLens([requestedLens, selectedOrbital], true, selectedFrame).then(() => {
+          setModelLoading(false);
+        });
+      } else if (!frameDefaultLens && !isDefaultRequested) {
+        if ((selectedLens == null ? void 0 : selectedLens.sku) == "lens-default") {
+          setModelLoading(true);
+          domInstance.current.changeLens([requestedLens, selectedOrbital], true, selectedFrame).then(() => {
+            setModelLoading(false);
+          });
+        } else {
+          domInstance.current.changeLens([requestedLens, selectedOrbital], false, selectedFrame);
+        }
+      } else if (frameDefaultLens && isDefaultRequested) {
+        domInstance.current.changeLens([frameDefaultLens, selectedOrbital], false, selectedFrame);
+      } else {
+        domInstance.current.changeLens([requestedLens, selectedOrbital], false, selectedFrame);
+      }
+      setSelectedLens(requestedLens);
+    };
+    const onChangeOrbital = async (requestedOrbital) => {
+      if (!domInstance.current) {
+        return;
+      }
+      if (requestedOrbital == selectedOrbital) {
+        return;
+      }
+      const isDefaultRequested = requestedOrbital.sku == "orbital-default";
+      const frameDefaultOrbital = getOrbitalInfo(selectedFrame);
+      setModelLoading(true);
+      if (isDefaultRequested) {
+        await domInstance.current.changeOrbital(frameDefaultOrbital).then(() => {
+          setModelLoading(false);
+        });
+      } else {
+        await domInstance.current.changeOrbital(requestedOrbital).then(() => {
+          setModelLoading(false);
+        });
+      }
+      setSelectedOrbital(requestedOrbital);
+    };
+    const onEngravingChecked = (checked) => {
+      console.log(checked);
+    };
+    const onEngravingTextAdded = (text) => {
+      console.log(text);
+    };
+    reactExports.useEffect(() => {
+      frameList && setSelectedFrame(frameList[0]);
+      lensList && setSelectedLens(lensList[0]);
+      orbitalList && setSelectedOrbital(orbitalList[0]);
+    }, [frameList, lensList, orbitalList]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { id: "Sprie-config-Main-Container", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { id: "Sprie-config-Header", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "img",
+          {
+            src: ditaLogo,
+            alt: "dita-logo",
+            height: 20
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "sprie-config-Header-groupName", children: [
+          orgName,
+          " CUSTOMIZER"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          id: "Sprie-config-Viewer-Container",
+          style: { height: `calc(${windowHeight}rem - ${occupiedHeight}rem)` },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: deg360_Icon, alt: "360deg-logo", height: 34 }),
+            modelLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-loadingFrame", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-loader" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, id: "holder-canvas" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          id: "Sprie-config-Customisation-block",
+          style: {
+            paddingTop: "1.5rem",
+            height: isMobileView ? showAddToCart ? "21rem" : "17.5rem" : "15rem"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                className: "sprie-config-price-block",
+                style: { top: isMobileView || !showAddToCart ? "-3rem" : "-8.5rem" },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: { marginRight: ".8rem" }, children: "$925.00 USD" }),
+                  !isMobileView && showAddToCart && /* @__PURE__ */ jsxRuntimeExports.jsx(AddToCartBtn, {}),
+                  showAddToCart && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: { marginRight: ".8rem", fontSize: ".6rem" }, children: "Please Allow 7-10 Days for Customization Process." })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Carousel, { setShowAddToCart, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                FramePalette,
+                {
+                  modelLoading,
+                  frameList,
+                  selectedFrame,
+                  onChangeFrame,
+                  heading: "SELECT FRAME"
+                }
+              ),
+              showOrbitalList && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                OrbitalPalette,
+                {
+                  orbitalList,
+                  selectedOrbital,
+                  modelLoading,
+                  onChangeOrbital,
+                  heading: "SELECT ORBITAL"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                LensPalette,
+                {
+                  modelLoading,
+                  lensList,
+                  selectedLens,
+                  onChangeLens,
+                  heading: "SELECT LENS COLOR"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                LaserEngraving,
+                {
+                  heading: "LASER ENGRAVING",
+                  onChecked: onEngravingChecked,
+                  onTextAdded: onEngravingTextAdded
+                }
+              )
+            ] }),
+            isMobileView && showAddToCart && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { position: "absolute", bottom: "0", width: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(AddToCartBtn, {}) })
+          ]
+        }
+      )
+    ] });
+  }
   function App({ apiService: apiService2, sku, events: events2, viewerOnly = false }) {
     const configurator = reactExports.useRef();
     const [settings, setSettings] = reactExports.useState(null);
+    const orgName = (settings == null ? void 0 : settings.orgName) || "";
     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 orbitalList = (settings == null ? void 0 : settings.orbitalList) || null;
     reactExports.useEffect(() => {
       (async () => {
         var _a2;
@@ -43592,11 +43882,24 @@ bool bvhIntersectFirstHit(
           sku,
           barcode: null
         });
-        const lensApiRes = await apiService2.FetchCustomisationList();
+        const lensApiRes = await apiService2.FetchCustomisationList("Lens");
+        const orbitalApiRes = await apiService2.FetchCustomisationList("Orbital");
+        const domInstance = await configurator.current.renderAsset({
+          containerId: "holder-canvas",
+          data: {
+            assetDetails: apiRes,
+            customisation: apiRes == null ? void 0 : apiRes.customisation
+          }
+        });
         setSettings({
           frameList: apiRes == null ? void 0 : apiRes.variants,
           lensList: lensApiRes == null ? void 0 : lensApiRes.data,
-          orgName: apiRes == null ? void 0 : apiRes.group.name
+          orbitalList: orbitalApiRes == null ? void 0 : orbitalApiRes.data,
+          orgName: apiRes == null ? void 0 : apiRes.group.name,
+          showOrbitals: (apiRes == null ? void 0 : apiRes.customisation).filter(
+            (e) => e.type === "Orbital"
+          ).length > 0,
+          domService: domInstance
         });
       })();
       return () => {
@@ -43613,8 +43916,11 @@ bool bvhIntersectFirstHit(
           apiService: apiService2,
           frameList,
           lensList,
+          orbitalList,
+          showOrbitalList: (settings == null ? void 0 : settings.showOrbitals) || false,
           viewerOnly,
-          ThreeDConfigurator: configurator.current
+          ThreeDConfigurator: configurator.current,
+          domService: settings == null ? void 0 : settings.domService
         }
       )
     ] });
@@ -51215,9 +51521,9 @@ bool bvhIntersectFirstHit(
       copy[i] = arr[i];
     return copy;
   }
-  function spliceOne(list, index) {
-    for (; index + 1 < list.length; index++)
-      list[index] = list[index + 1];
+  function spliceOne(list, index2) {
+    for (; index2 + 1 < list.length; index2++)
+      list[index2] = list[index2 + 1];
     list.pop();
   }
   function unwrapListeners(arr) {