@pairbo/ui-kit 0.2.4 → 0.2.5

package/dist/pairbo.es.js

@@ -627,7 +627,7 @@ function r$2(r3) {
     return (this.renderRoot ?? (e$4 ?? (e$4 = document.createDocumentFragment()))).querySelectorAll(r3);
   } });
 }
-const styles$j = i$7`
+const styles$l = i$7`
   :host {
     display: block;
     font-family: Arial, sans-serif;
@@ -640,9 +640,9 @@ const styles$j = i$7`
     color: black;
   }
 `;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __decorateClass$m = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = decorator(result) || result;
@@ -748,7 +748,7 @@ let PairboMessageSelector = class extends r$5 {
   }
 };
 PairboMessageSelector.styles = [
-  styles$j,
+  styles$l,
   i$7`
       .message-selector {
         text-align: left;
@@ -781,7 +781,7 @@ PairboMessageSelector.properties = {
   premiumSelected: { type: Boolean },
   freeMessageSelected: { type: Boolean }
 };
-PairboMessageSelector = __decorateClass$k([
+PairboMessageSelector = __decorateClass$m([
   t$3("pairbo-message-selector")
 ], PairboMessageSelector);
 function t$2(t2, e3, s2) {
@@ -7495,7 +7495,7 @@ const componentStyles = i$7`
     display: none !important;
   }
 `;
-const styles$i = i$7`
+const styles$k = i$7`
   :host {
     display: block;
   }
@@ -7518,14 +7518,14 @@ const styles$i = i$7`
     object-fit: contain;
   }
 `;
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$j(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 let FabricExample = class extends r$5 {
@@ -7753,68 +7753,68 @@ let FabricExample = class extends r$5 {
     </div>`;
   }
 };
-FabricExample.styles = [componentStyles, styles$i];
-__decorateClass$j([
+FabricExample.styles = [componentStyles, styles$k];
+__decorateClass$l([
   n$3()
 ], FabricExample.prototype, "backgroundUrl", 2);
-__decorateClass$j([
+__decorateClass$l([
   n$3()
 ], FabricExample.prototype, "message", 2);
-__decorateClass$j([
+__decorateClass$l([
   n$3({ type: String, reflect: true })
 ], FabricExample.prototype, "alignment", 2);
-__decorateClass$j([
+__decorateClass$l([
   n$3({ type: String })
 ], FabricExample.prototype, "fontFamily", 2);
-__decorateClass$j([
+__decorateClass$l([
   n$3({ type: String })
 ], FabricExample.prototype, "color", 2);
-__decorateClass$j([
+__decorateClass$l([
   e$5(".fabric-container")
 ], FabricExample.prototype, "_fabricContainer", 2);
-__decorateClass$j([
+__decorateClass$l([
   r$3()
 ], FabricExample.prototype, "_canvas", 2);
-__decorateClass$j([
+__decorateClass$l([
   r$3()
 ], FabricExample.prototype, "_canvasElement", 2);
-__decorateClass$j([
+__decorateClass$l([
   r$3()
 ], FabricExample.prototype, "_textbox", 2);
-__decorateClass$j([
+__decorateClass$l([
   r$3()
 ], FabricExample.prototype, "_backgroundImg", 2);
-__decorateClass$j([
+__decorateClass$l([
   r$3()
 ], FabricExample.prototype, "_natureSize", 2);
-__decorateClass$j([
+__decorateClass$l([
   r$3()
 ], FabricExample.prototype, "_scale", 2);
-__decorateClass$j([
+__decorateClass$l([
   r$3()
 ], FabricExample.prototype, "_lineHeight", 2);
-__decorateClass$j([
+__decorateClass$l([
   r$3()
 ], FabricExample.prototype, "_fontSize", 2);
-__decorateClass$j([
+__decorateClass$l([
   r$3()
 ], FabricExample.prototype, "_rect", 2);
-__decorateClass$j([
+__decorateClass$l([
   watch("message")
 ], FabricExample.prototype, "handleMessageChange", 1);
-__decorateClass$j([
+__decorateClass$l([
   watch("alignment")
 ], FabricExample.prototype, "handleAlignmentChange", 1);
-__decorateClass$j([
+__decorateClass$l([
   watch("fontFamily")
 ], FabricExample.prototype, "handleFontFamilyChange", 1);
-__decorateClass$j([
+__decorateClass$l([
   watch("color")
 ], FabricExample.prototype, "handleColorChange", 1);
-FabricExample = __decorateClass$j([
+FabricExample = __decorateClass$l([
   t$3("fabric-example")
 ], FabricExample);
-const styles$h = i$7`
+const styles$j = i$7`
   :host {
     display: block;
   }
@@ -12811,14 +12811,14 @@ const formControlStyles = i$7`
     margin-top: var(--pbo-spacing-2x);
   }
 `;
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
+var __defProp$j = Object.defineProperty;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$i(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 let PboSelector = class extends r$5 {
@@ -12831,6 +12831,7 @@ let PboSelector = class extends r$5 {
       { value: "arial", label: "📜 Arial", font: "'Arial', sans-serif" },
       { value: "mono", label: "💻 Monospace", font: "'Courier New', monospace" }
     ];
+    this.disabled = false;
     this.size = "medium";
     this.label = "";
   }
@@ -12838,8 +12839,17 @@ let PboSelector = class extends r$5 {
     var _a2;
     return (_a2 = this._choices) == null ? void 0 : _a2.getValue().value;
   }
+  handleDisabledChanged() {
+    var _a2;
+    if (this._choices && this.disabled) {
+      this._choices.disable();
+    } else {
+      (_a2 = this._choices) == null ? void 0 : _a2.enable();
+    }
+  }
   firstUpdated() {
     this._initializeChoices();
+    this.handleDisabledChanged();
   }
   // @ts-ignore
   _initializeChoices() {
@@ -12870,9 +12880,15 @@ let PboSelector = class extends r$5 {
               getClassNames2(data.highlighted ? classNames.highlightedState : classNames.itemSelectable).join(" ")
             ].join(" ");
             return template(`
-            <div class="${templateClassNames}"
-                data-item data-id="${data.id}" data-value="${escapeForTemplate2(data.value)}" ${data.active ? 'aria-selected="true"' : ""} ${data.disabled ? 'aria-disabled="true"' : ""}
-                 style="font-family: ${((_a3 = data.customProperties) == null ? void 0 : _a3.font) || "inherit"}">
+            <div 
+              class="${templateClassNames}"
+              data-item 
+              data-id="${data.id}" 
+              data-value="${escapeForTemplate2(data.value)}" 
+              ${data.active ? 'aria-selected="true"' : ""} 
+              ${data.disabled ? 'aria-disabled="true"' : ""}
+              style="font-family: ${((_a3 = data.customProperties) == null ? void 0 : _a3.font) || "inherit"}"
+            >
               ${data.label}
             </div>
           `);
@@ -12886,8 +12902,13 @@ let PboSelector = class extends r$5 {
             ].join(" ");
             return template(`
             <div class="${templateClassNames}"
-                data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : "data-choice-selectable"} data-id="${data.id}" data-value="${escapeForTemplate2(data.value)}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}
-                 style="font-family: ${((_a3 = data.customProperties) == null ? void 0 : _a3.font) || "inherit"}">
+              data-select-text="${this.config.itemSelectText}" 
+              data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : "data-choice-selectable"} 
+              data-id="${data.id}" 
+              data-value="${escapeForTemplate2(data.value)}" 
+              ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}
+              style="font-family: ${((_a3 = data.customProperties) == null ? void 0 : _a3.font) || "inherit"}"
+            >
               ${data.label}
             </div>
           `);
@@ -12931,20 +12952,26 @@ let PboSelector = class extends r$5 {
       <select part="base" class="js-choice"></select>`;
   }
 };
-PboSelector.styles = [componentStyles, styles$h, formControlStyles, r$8(choicesStyles)];
-__decorateClass$i([
+PboSelector.styles = [componentStyles, styles$j, formControlStyles, r$8(choicesStyles)];
+__decorateClass$k([
   n$3({ type: Array })
 ], PboSelector.prototype, "fonts", 2);
-__decorateClass$i([
+__decorateClass$k([
+  n$3({ type: Boolean, reflect: true })
+], PboSelector.prototype, "disabled", 2);
+__decorateClass$k([
   n$3()
 ], PboSelector.prototype, "size", 2);
-__decorateClass$i([
+__decorateClass$k([
   n$3()
 ], PboSelector.prototype, "label", 2);
-__decorateClass$i([
+__decorateClass$k([
   e$5(".js-choice")
 ], PboSelector.prototype, "choiceEl", 2);
-PboSelector = __decorateClass$i([
+__decorateClass$k([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], PboSelector.prototype, "handleDisabledChanged", 1);
+PboSelector = __decorateClass$k([
   t$3("pbo-selector")
 ], PboSelector);
 const buttonStyles = i$7`
@@ -13423,12 +13450,21 @@ const buttonStyles = i$7`
   .button--loading .button__caret {
     visibility: hidden;
   }
+  .button--loading pbo-spinner {
+    --indicator-color: currentColor;
+    position: absolute;
+    font-size: 1em;
+    height: 1em;
+    width: 1em;
+    top: calc(50% - 0.5em);
+    left: calc(50% - 0.5em);
+  }
 
   /*
    * Badges
    */
 
-  .button ::slotted(sl-badge) {
+  .button ::slotted(pbo-badge) {
     position: absolute;
     top: 0;
     right: 0;
@@ -13436,7 +13472,7 @@ const buttonStyles = i$7`
     pointer-events: none;
   }
 
-  .button--rtl ::slotted(sl-badge) {
+  .button--rtl ::slotted(pbo-badge) {
     right: auto;
     left: 0;
     translate: -50% -50%;
@@ -13913,14 +13949,94 @@ const customErrorValidityState = Object.freeze({
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const o$2 = (o2) => o2 ?? E$1;
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+const styles$i = i$7`
+  :host {
+    --track-width: 2px;
+    --track-color: rgb(128 128 128 / 25%);
+    --indicator-color: var(--pbo-color-primary-600);
+    --speed: 2s;
+
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+    flex: none;
+  }
+
+  .spinner {
+    flex: 1 1 auto;
+    height: 100%;
+    width: 100%;
+  }
+
+  .spinner__track,
+  .spinner__indicator {
+    fill: none;
+    stroke-width: var(--track-width);
+    r: calc(0.5em - var(--track-width) / 2);
+    cx: 0.5em;
+    cy: 0.5em;
+    transform-origin: 50% 50%;
+  }
+
+  .spinner__track {
+    stroke: var(--track-color);
+    transform-origin: 0% 0%;
+  }
+
+  .spinner__indicator {
+    stroke: var(--indicator-color);
+    stroke-linecap: round;
+    stroke-dasharray: 150% 75%;
+    animation: spin var(--speed) linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+      stroke-dasharray: 0.05em, 3em;
+    }
+
+    50% {
+      transform: rotate(450deg);
+      stroke-dasharray: 1.375em, 1.375em;
+    }
+
+    100% {
+      transform: rotate(1080deg);
+      stroke-dasharray: 0.05em, 3em;
+    }
+  }
+`;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
+      result = decorator(result) || result;
+  return result;
+};
+let PboSpinner$1 = class PboSpinner extends PairboElement {
+  render() {
+    return x$1`
+      <svg part="base" class="spinner" role="progressbar" aria-label="loading">
+        <circle class="spinner__track"></circle>
+        <circle class="spinner__indicator"></circle>
+      </svg>
+    `;
+  }
+};
+PboSpinner$1.styles = [componentStyles, styles$i];
+PboSpinner$1 = __decorateClass$j([
+  t$3("pbo-spinner")
+], PboSpinner$1);
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$h(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 let PboButton$1 = class PboButton extends PairboElement {
@@ -13940,6 +14056,7 @@ let PboButton$1 = class PboButton extends PairboElement {
     this.circle = false;
     this.type = "button";
     this.colorBlock = false;
+    this.loading = false;
     this.isIconButton = false;
     this.hasFocus = false;
   }
@@ -14030,71 +14147,83 @@ let PboButton$1 = class PboButton extends PairboElement {
       "button--standard": !this.outline,
       "button--outline": this.outline,
       "button--focused": this.hasFocus,
+      "button--loading": this.loading,
       "button--has-label": this.hasSlotController.test("[default]"),
       "button--has-prefix": this.hasSlotController.test("prefix"),
       "button--has-suffix": this.hasSlotController.test("suffix"),
       "button--circle": this.circle,
       "button--disabled": this.disabled
     })}
+      ?disabled=${o$2(isLink ? void 0 : this.disabled)}
       tabindex=${this.disabled ? "-1" : "0"}
       href="${this.href}"
       name=${o$2(isLink ? void 0 : this.name)}
       @blur=${this.handleBlur}
       @focus=${this.handleFocus}
-      @invalud=${this.isButton() ? this.handleInvalid : null}
+      @invalid=${this.isButton() ? this.handleInvalid : null}
       @click=${this.handleClick}
     >
       <slot name="prefix" part="prefix" class="button__prefix"></slot>
       <slot part="label" class="button__label"></slot>
       <slot name="suffix" part="suffix" class="button__suffix"></slot>
+      ${this.loading ? u$1`<pbo-spinner part="spinner"></pbo-spinner>` : ""}
     </${tag}>`;
   }
 };
 PboButton$1.styles = [componentStyles, buttonStyles];
-__decorateClass$h([
+PboButton$1.dependencies = {
+  "pbo-spinner": PboSpinner$1
+};
+__decorateClass$i([
   e$5(".button")
 ], PboButton$1.prototype, "button", 2);
-__decorateClass$h([
+__decorateClass$i([
+  e$5(".button--loading pbo-spinner")
+], PboButton$1.prototype, "spinner", 2);
+__decorateClass$i([
   n$3({ type: Boolean, reflect: true })
 ], PboButton$1.prototype, "disabled", 2);
-__decorateClass$h([
+__decorateClass$i([
   n$3()
 ], PboButton$1.prototype, "href", 2);
-__decorateClass$h([
+__decorateClass$i([
   n$3()
 ], PboButton$1.prototype, "name", 2);
-__decorateClass$h([
+__decorateClass$i([
   n$3()
 ], PboButton$1.prototype, "value", 2);
-__decorateClass$h([
+__decorateClass$i([
   n$3({ reflect: true })
 ], PboButton$1.prototype, "variant", 2);
-__decorateClass$h([
+__decorateClass$i([
   n$3({ type: Boolean, reflect: true })
 ], PboButton$1.prototype, "outline", 2);
-__decorateClass$h([
+__decorateClass$i([
   n$3({ reflect: true })
 ], PboButton$1.prototype, "size", 2);
-__decorateClass$h([
+__decorateClass$i([
   n$3({ type: Boolean, reflect: true })
 ], PboButton$1.prototype, "circle", 2);
-__decorateClass$h([
+__decorateClass$i([
   n$3({ reflect: true })
 ], PboButton$1.prototype, "type", 2);
-__decorateClass$h([
+__decorateClass$i([
   n$3({ type: Boolean, reflect: true, attribute: "color-block" })
 ], PboButton$1.prototype, "colorBlock", 2);
-__decorateClass$h([
+__decorateClass$i([
+  n$3({ type: Boolean, reflect: true })
+], PboButton$1.prototype, "loading", 2);
+__decorateClass$i([
   r$3()
 ], PboButton$1.prototype, "isIconButton", 2);
-__decorateClass$h([
+__decorateClass$i([
   r$3()
 ], PboButton$1.prototype, "hasFocus", 2);
-PboButton$1 = __decorateClass$h([
+PboButton$1 = __decorateClass$i([
   t$3("pbo-button")
 ], PboButton$1);
 const PboButton2 = PboButton$1;
-const styles$g = i$7`
+const styles$h = i$7`
   :host {
     display: inline-block;
   }
@@ -14104,14 +14233,14 @@ const styles$g = i$7`
     /* flex-wrap: nowrap; */
   }
 `;
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 let PboButtonGroup$1 = class PboButtonGroup extends PairboElement {
@@ -14172,17 +14301,17 @@ let PboButtonGroup$1 = class PboButtonGroup extends PairboElement {
     `;
   }
 };
-PboButtonGroup$1.styles = [componentStyles, styles$g];
-__decorateClass$g([
+PboButtonGroup$1.styles = [componentStyles, styles$h];
+__decorateClass$h([
   e$5("slot")
 ], PboButtonGroup$1.prototype, "defaultSlot", 2);
-__decorateClass$g([
+__decorateClass$h([
   r$3()
 ], PboButtonGroup$1.prototype, "disableRole", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$3()
 ], PboButtonGroup$1.prototype, "label", 2);
-PboButtonGroup$1 = __decorateClass$g([
+PboButtonGroup$1 = __decorateClass$h([
   t$3("pbo-button-group")
 ], PboButtonGroup$1);
 function findButton(el) {
@@ -14190,7 +14319,7 @@ function findButton(el) {
   return el.closest(selector) ?? el.querySelector(selector);
 }
 const PboButtonGroup2 = PboButtonGroup$1;
-const styles$f = i$7`
+const styles$g = i$7`
   ${buttonStyles}
 
   .button__prefix,
@@ -14239,14 +14368,14 @@ const n3 = "important", i2 = " !" + n3, o$1 = e$2(class extends i$2 {
     return T$1;
   }
 });
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 let PboRadioButton$1 = class PboRadioButton extends PairboElement {
@@ -14333,39 +14462,39 @@ let PboRadioButton$1 = class PboRadioButton extends PairboElement {
     `;
   }
 };
-PboRadioButton$1.styles = [componentStyles, styles$f];
-__decorateClass$f([
+PboRadioButton$1.styles = [componentStyles, styles$g];
+__decorateClass$g([
   e$5(".button")
 ], PboRadioButton$1.prototype, "input", 2);
-__decorateClass$f([
+__decorateClass$g([
   e$5(".hidden-input")
 ], PboRadioButton$1.prototype, "hiddenInput", 2);
-__decorateClass$f([
+__decorateClass$g([
   n$3({ type: Boolean, reflect: true })
 ], PboRadioButton$1.prototype, "checked", 2);
-__decorateClass$f([
+__decorateClass$g([
   n$3()
 ], PboRadioButton$1.prototype, "value", 2);
-__decorateClass$f([
+__decorateClass$g([
   n$3({ type: Boolean, reflect: true })
 ], PboRadioButton$1.prototype, "disabled", 2);
-__decorateClass$f([
+__decorateClass$g([
   n$3({ reflect: true })
 ], PboRadioButton$1.prototype, "size", 2);
-__decorateClass$f([
+__decorateClass$g([
   n$3({ type: Boolean, reflect: true })
 ], PboRadioButton$1.prototype, "circle", 2);
-__decorateClass$f([
+__decorateClass$g([
   n$3({ type: Boolean, reflect: true, attribute: "icon-only" })
 ], PboRadioButton$1.prototype, "iconOnly", 2);
-__decorateClass$f([
+__decorateClass$g([
   r$3()
 ], PboRadioButton$1.prototype, "hasFocus", 2);
-PboRadioButton$1 = __decorateClass$f([
+PboRadioButton$1 = __decorateClass$g([
   t$3("pbo-radio-button")
 ], PboRadioButton$1);
 const PboRadioButton2 = PboRadioButton$1;
-const styles$e = i$7`
+const styles$f = i$7`
   :host {
     display: block;
   }
@@ -14398,14 +14527,14 @@ const styles$e = i$7`
     border-radius: 1rem;
   }
 `;
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 let PboRadioGroup$1 = class PboRadioGroup extends PairboElement {
@@ -14628,58 +14757,58 @@ let PboRadioGroup$1 = class PboRadioGroup extends PairboElement {
     `;
   }
 };
-PboRadioGroup$1.styles = [componentStyles, styles$e, formControlStyles];
+PboRadioGroup$1.styles = [componentStyles, styles$f, formControlStyles];
 PboRadioGroup$1.dependencies = { "pbo-button-group": PboButtonGroup$1 };
-__decorateClass$e([
+__decorateClass$f([
   e$5("slot:not([name])")
 ], PboRadioGroup$1.prototype, "defaultSlot", 2);
-__decorateClass$e([
+__decorateClass$f([
   e$5(".radio-group__validation-input")
 ], PboRadioGroup$1.prototype, "validationInput", 2);
-__decorateClass$e([
+__decorateClass$f([
   r$3()
 ], PboRadioGroup$1.prototype, "hasButtonGroup", 2);
-__decorateClass$e([
+__decorateClass$f([
   r$3()
 ], PboRadioGroup$1.prototype, "errorMessage", 2);
-__decorateClass$e([
+__decorateClass$f([
   r$3()
 ], PboRadioGroup$1.prototype, "defaultValue", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$3({ type: Boolean, reflect: true })
 ], PboRadioGroup$1.prototype, "required", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$3()
 ], PboRadioGroup$1.prototype, "name", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$3({ reflect: true })
 ], PboRadioGroup$1.prototype, "value", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$3({ attribute: "help-text" })
 ], PboRadioGroup$1.prototype, "helpText", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$3()
 ], PboRadioGroup$1.prototype, "label", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$3({ type: Boolean, reflect: true, attribute: "icon-group" })
 ], PboRadioGroup$1.prototype, "iconGroup", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$3()
 ], PboRadioGroup$1.prototype, "size", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$3({ type: Boolean, reflect: true })
 ], PboRadioGroup$1.prototype, "disabled", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$3({ reflect: true })
 ], PboRadioGroup$1.prototype, "form", 2);
-__decorateClass$e([
+__decorateClass$f([
   watch("value")
 ], PboRadioGroup$1.prototype, "handleValueChange", 1);
-PboRadioGroup$1 = __decorateClass$e([
+PboRadioGroup$1 = __decorateClass$f([
   t$3("pbo-radio-group")
 ], PboRadioGroup$1);
 const PboRadioGroup2 = PboRadioGroup$1;
-const styles$d = i$7`
+const styles$e = i$7`
   :host {
     display: block;
     position: relative;
@@ -14921,14 +15050,14 @@ const l2 = e$2(class extends i$2 {
     return m(i3), t2;
   }
 });
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 let PboTextarea$1 = class PboTextarea extends PairboElement {
@@ -15103,63 +15232,63 @@ let PboTextarea$1 = class PboTextarea extends PairboElement {
     </div>`;
   }
 };
-PboTextarea$1.styles = [componentStyles, styles$d, formControlStyles];
-__decorateClass$d([
+PboTextarea$1.styles = [componentStyles, styles$e, formControlStyles];
+__decorateClass$e([
   e$5(".textarea__control")
 ], PboTextarea$1.prototype, "input", 2);
-__decorateClass$d([
+__decorateClass$e([
   e$5(".textarea__size-adjuster")
 ], PboTextarea$1.prototype, "sizeAdjuster", 2);
-__decorateClass$d([
+__decorateClass$e([
   r$3()
 ], PboTextarea$1.prototype, "hasFocus", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3()
 ], PboTextarea$1.prototype, "name", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3()
 ], PboTextarea$1.prototype, "value", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3({ reflect: true })
 ], PboTextarea$1.prototype, "size", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3({ type: Boolean, reflect: true })
 ], PboTextarea$1.prototype, "filled", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3()
 ], PboTextarea$1.prototype, "placeholder", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3({ type: Number })
 ], PboTextarea$1.prototype, "rows", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3()
 ], PboTextarea$1.prototype, "resize", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3({ type: Boolean, reflect: true })
 ], PboTextarea$1.prototype, "disabled", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3({ type: Boolean, reflect: true })
 ], PboTextarea$1.prototype, "readonly", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3({ reflect: true })
 ], PboTextarea$1.prototype, "form", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3({ type: Boolean, reflect: true })
 ], PboTextarea$1.prototype, "required", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3({ type: Number })
 ], PboTextarea$1.prototype, "minlength", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3({ type: Number })
 ], PboTextarea$1.prototype, "maxlength", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$3({ attribute: "help-text" })
 ], PboTextarea$1.prototype, "helpText", 2);
-PboTextarea$1 = __decorateClass$d([
+PboTextarea$1 = __decorateClass$e([
   t$3("pbo-textarea")
 ], PboTextarea$1);
 const PboTextarea2 = PboTextarea$1;
-const styles$c = i$7`
+const styles$d = i$7`
   :host {
     display: block;
     width: 100%;
@@ -15223,7 +15352,7 @@ const styles$c = i$7`
     }
   }
 `;
-const styles$b = i$7`
+const styles$c = i$7`
   :host {
     display: block;
   }
@@ -15256,28 +15385,30 @@ const isValid = (value) => {
 const removeNullUndefined = (obj) => Object.entries(obj).reduce((acc, [k3, v2]) => {
   return v2 == null ? acc : (acc[k3] = v2, acc);
 }, {});
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
   for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 let PboTypeForm$1 = class PboTypeForm extends PairboElement {
   constructor() {
     super(...arguments);
-    this.windowHeight = window.innerHeight;
     this.resizeTimeout = null;
-    this.charsNum = 0;
-    this.ctaButtonState = PboTypeForm$1.CTA_STATES.primary;
     this.cardInnerImageUrl = "../../../public/Greeting Card from Pairbo.png";
     this.card = null;
-    this.submitTypeForm = (formData) => {
+    this.submitTypeForm = async (formData) => {
       console.error("submitTypingForm function not implemented", formData);
     };
+    this.loading = false;
+    this.disabled = false;
+    this.windowHeight = window.innerHeight;
+    this.charsNum = 0;
+    this.ctaButtonState = PboTypeForm$1.CTA_STATES.primary;
     this.handleResize = () => {
       if (this.resizeTimeout) {
         window.clearTimeout(this.resizeTimeout);
@@ -15287,7 +15418,27 @@ let PboTypeForm$1 = class PboTypeForm extends PairboElement {
       }, 50);
     };
   }
+  isLoadingChanged() {
+    this.ctaButtons.forEach((button) => {
+      button.loading = this.loading;
+    });
+  }
+  disabledChanged() {
+    this.greetingText.disabled = this.disabled;
+    this.fontSelector.disabled = this.disabled;
+    this.textColor.childNodes.forEach((radio) => {
+      radio.disabled = this.disabled;
+    });
+    this.textAlignment.childNodes.forEach((radio) => {
+      radio.disabled = this.disabled;
+    });
+    this.ctaButtons.forEach((button) => {
+      button.disabled = this.disabled;
+    });
+  }
   firstUpdated() {
+    this.disabledChanged();
+    this.isLoadingChanged();
     this.textArea.addEventListener("invalid", () => {
       alert("Please add a message to continue");
     });
@@ -15374,6 +15525,7 @@ let PboTypeForm$1 = class PboTypeForm extends PairboElement {
     ]}"
           @pbo-change=${this.handleFormChange}
           size="large"
+          disabled="${this.disabled}"
         ></pbo-selector>
 
         <div class="color-alignment-container">
@@ -15384,8 +15536,8 @@ let PboTypeForm$1 = class PboTypeForm extends PairboElement {
             label="Color"
             size="large"
           >
-            <pbo-radio-button value="rgb(0,0,0)" size="small" circle></pbo-radio-button>
-            <pbo-radio-button value="rgb(255,255,255)" size="small" circle></pbo-radio-button>
+            <pbo-radio-button disabled="${this.disabled}" value="rgb(0,0,0)" size="small" circle></pbo-radio-button>
+            <pbo-radio-button disabled="${this.disabled}" value="rgb(255,255,255)" size="small" circle></pbo-radio-button>
           </pbo-radio-group>
 
           <pbo-radio-group
@@ -15452,7 +15604,7 @@ let PboTypeForm$1 = class PboTypeForm extends PairboElement {
     `;
   }
 };
-PboTypeForm$1.styles = [componentStyles, formControlStyles, styles$b];
+PboTypeForm$1.styles = [componentStyles, formControlStyles, styles$c];
 PboTypeForm$1.dependencies = {
   "pbo-selector": PboSelector,
   "pbo-textarea": PboTextarea$1,
@@ -15471,43 +15623,58 @@ PboTypeForm$1.CTA_STATES = {
     message: "Save and Continue"
   }
 };
-__decorateClass$c([
+__decorateClass$d([
+  n$3({ type: String, reflect: true })
+], PboTypeForm$1.prototype, "cardInnerImageUrl", 2);
+__decorateClass$d([
+  n$3()
+], PboTypeForm$1.prototype, "card", 2);
+__decorateClass$d([
+  n$3()
+], PboTypeForm$1.prototype, "submitTypeForm", 2);
+__decorateClass$d([
+  n$3({ type: Boolean, reflect: true })
+], PboTypeForm$1.prototype, "loading", 2);
+__decorateClass$d([
+  n$3({ type: Boolean, reflect: true })
+], PboTypeForm$1.prototype, "disabled", 2);
+__decorateClass$d([
   e$5(".greeting-text")
 ], PboTypeForm$1.prototype, "greetingText", 2);
-__decorateClass$c([
+__decorateClass$d([
   e$5(".font-selector")
 ], PboTypeForm$1.prototype, "fontSelector", 2);
-__decorateClass$c([
+__decorateClass$d([
   e$5(".text-color")
 ], PboTypeForm$1.prototype, "textColor", 2);
-__decorateClass$c([
+__decorateClass$d([
   e$5(".text-alignment")
 ], PboTypeForm$1.prototype, "textAlignment", 2);
-__decorateClass$c([
+__decorateClass$d([
   e$5(".typing-form")
 ], PboTypeForm$1.prototype, "typingForm", 2);
-__decorateClass$c([
+__decorateClass$d([
   e$5("pbo-textarea")
 ], PboTypeForm$1.prototype, "textArea", 2);
-__decorateClass$c([
+__decorateClass$d([
+  r$2(".cta-buttons pbo-button")
+], PboTypeForm$1.prototype, "ctaButtons", 2);
+__decorateClass$d([
   r$3()
 ], PboTypeForm$1.prototype, "windowHeight", 2);
-__decorateClass$c([
+__decorateClass$d([
   r$3()
 ], PboTypeForm$1.prototype, "charsNum", 2);
-__decorateClass$c([
+__decorateClass$d([
   r$3()
 ], PboTypeForm$1.prototype, "ctaButtonState", 2);
-__decorateClass$c([
-  n$3({ type: String, reflect: true })
-], PboTypeForm$1.prototype, "cardInnerImageUrl", 2);
-__decorateClass$c([
-  n$3()
-], PboTypeForm$1.prototype, "card", 2);
-__decorateClass$c([
-  n$3()
-], PboTypeForm$1.prototype, "submitTypeForm", 2);
-PboTypeForm$1 = __decorateClass$c([
+__decorateClass$d([
+  watch("loading", { waitUntilFirstUpdate: true })
+], PboTypeForm$1.prototype, "isLoadingChanged", 1);
+__decorateClass$d([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], PboTypeForm$1.prototype, "disabledChanged", 1);
+PboTypeForm$1 = __decorateClass$d([
   t$3("pbo-type-form")
 ], PboTypeForm$1);
 /**
@@ -15546,20 +15713,13 @@ const d = (t2) => l$1(t2) ? t2._$litType$.h : t2.strings, h2 = e$2(class extends
     return this.render(e$12);
   }
 });
-const styles$a = i$7`
+const styles$b = i$7`
   :host {
     display: block;
     width: 100%;
     height: auto;
   }
 
-  ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    height: 100%;
-  }
-
   .main-slide-container {
     display: inline;
     position: relative;
@@ -15623,39 +15783,168 @@ const styles$a = i$7`
     -webkit-user-drag: none;
     pointer-events: none;
   }
+
   .thumbnails {
     width: 20%;
     display: flex;
     flex-direction: column;
     gap: 1.9%;
-    padding: 0;
     justify-content: start;
     overflow-y: auto;
+    box-sizing: border-box;
   }
 
   .thumbnail {
-    list-style: none;
-    margin: 0 0.2rem;
     cursor: pointer;
-    opacity: 0.3;
+    opacity: 0.35;
+    width: 100%;
+    box-sizing: border-box;
+    border: 2px solid var(--pbo-color-gray-300);
   }
 
   .thumbnail.active {
     opacity: 1;
   }
+
   .main-slide.active {
-    display: list-item;
+    display: block;
   }
-  .thumbnail img {
+
+  .thumbnail img,
+  .thumbnail pbo-image {
+    display: block;
     width: 100%;
     height: auto;
-    border: 2px solid var(--pbo-color-gray-300);
+  }
+`;
+const splideCss = ".splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}";
+const styles$a = i$7`
+  :host,
+  :host * {
+    max-height: 100%;
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
   }
 
-  .main-slide-container ul li {
+  .skeleton {
+    background: #f3f3f3;
+    animation: pulse 1.5s infinite;
+    height: auto;
+    width: 100%;
+    aspect-ratio: 3 / 4;
+  }
+
+  img {
+    width: 100%;
+    height: auto;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  img.hidden {
+    display: none;
+  }
+
+  img.loaded {
+    opacity: 1;
+    display: block;
+  }
+
+  @keyframes pulse {
+    0% {
+      background-color: #f3f3f3;
+    }
+    50% {
+      background-color: #e0e0e0;
+    }
+    100% {
+      background-color: #f3f3f3;
+    }
   }
 `;
-const splideCss = ".splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}";
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+  for (var i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$c(target, key, result);
+  return result;
+};
+let PboImage$1 = class PboImage extends PairboElement {
+  constructor() {
+    super(...arguments);
+    this.skeletonHeight = "2000px";
+    this.skeletonWidth = "1429px";
+    this.src = "";
+    this.alt = "";
+    this.placeholder = "";
+    this.loaded = false;
+  }
+  handleSrcChange() {
+    this.loaded = false;
+  }
+  handleError() {
+    this.loaded = true;
+    if (this.placeholder) {
+      this.src = this.placeholder;
+    }
+  }
+  handleOnLoad() {
+    this.loaded = true;
+  }
+  firstUpdated() {
+    this.imgEl.onload = () => this.handleOnLoad();
+  }
+  render() {
+    return x$1`
+      ${!this.loaded ? x$1` <div class="skeleton"></div>` : ""}
+      <img
+        src=${this.src}
+        alt=${this.alt}
+        class=${e$1({
+      loaded: this.loaded,
+      hidden: !this.loaded
+    })}
+        @error=${() => this.handleError()}
+      />
+    `;
+  }
+};
+PboImage$1.styles = [componentStyles, styles$a];
+__decorateClass$c([
+  n$3()
+], PboImage$1.prototype, "skeletonHeight", 2);
+__decorateClass$c([
+  n$3()
+], PboImage$1.prototype, "skeletonWidth", 2);
+__decorateClass$c([
+  n$3()
+], PboImage$1.prototype, "src", 2);
+__decorateClass$c([
+  n$3()
+], PboImage$1.prototype, "alt", 2);
+__decorateClass$c([
+  n$3()
+], PboImage$1.prototype, "placeholder", 2);
+__decorateClass$c([
+  r$3()
+], PboImage$1.prototype, "loaded", 2);
+__decorateClass$c([
+  e$5("img")
+], PboImage$1.prototype, "imgEl", 2);
+__decorateClass$c([
+  watch("src")
+], PboImage$1.prototype, "handleSrcChange", 1);
+PboImage$1 = __decorateClass$c([
+  t$3("pbo-image")
+], PboImage$1);
 var __defProp$b = Object.defineProperty;
 var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
 var __decorateClass$b = (decorators, target, key, kind) => {
@@ -15729,7 +16018,7 @@ let PboEditorCardSlider$1 = class PboEditorCardSlider extends PairboElement {
     var _a2, _b, _c, _d;
     if (newValue) {
       this.mainImageTemplates = [
-        x$1`<img src="${newValue.medias.cover.url || "https://picsum.photos/id/1/300/400"}" alt="" />`,
+        x$1`<pbo-image src="${newValue.medias.cover.url || "https://picsum.photos/id/1/300/400"}" alt="" />`,
         x$1`<pbo-type-canvas
           background-url=${newValue.medias.insert.url}
           message=${(_a2 = this.livePreviewProps) == null ? void 0 : _a2.text}
@@ -15738,7 +16027,7 @@ let PboEditorCardSlider$1 = class PboEditorCardSlider extends PairboElement {
           font=${(_d = this.livePreviewProps) == null ? void 0 : _d.font}
           @click="${this.handleOpenZoomedClick}"
         ></pbo-type-canvas>`,
-        x$1`<img src="${newValue.medias.rendered_2.url || "https://picsum.photos/id/10/300/400"}" alt="" />`
+        x$1`<pbo-image src="${newValue.medias.rendered_2.url || "https://picsum.photos/id/10/300/400"}" alt="" />`
       ];
     }
   }
@@ -15768,7 +16057,7 @@ let PboEditorCardSlider$1 = class PboEditorCardSlider extends PairboElement {
   get mainSlides() {
     if (!this.card) return [];
     const templates2 = [
-      x$1`<img src="${this.card.medias.cover.url}" alt="" />`,
+      x$1`<pbo-image src="${this.card.medias.cover.url}" alt="" />`,
       x$1`<pbo-type-canvas
         background-url=${this.card.medias.insert.url}
         message=${this.livePreviewProps.text}
@@ -15785,22 +16074,22 @@ let PboEditorCardSlider$1 = class PboEditorCardSlider extends PairboElement {
     var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s, _t2;
     return x$1`
       <div class="card--slider--wrapper">
-        <ul id="thumbnails" class="thumbnails">
-          <li class="thumbnail">
-            <img src="${((_a2 = this.card) == null ? void 0 : _a2.medias.cover.url) || "https://picsum.photos/id/1/300/400"}" alt="" />
-          </li>
-          <li class="thumbnail">
-            <img src="${((_b = this.card) == null ? void 0 : _b.medias.rendered_1.url) || "https://picsum.photos/id/10/300/400"}" alt="" />
-          </li>
-          <li class="thumbnail">
-            <img src="${((_c = this.card) == null ? void 0 : _c.medias.rendered_2.url) || "https://picsum.photos/id/10/300/400"}" alt="" />
-          </li>
-        </ul>
+        <div id="thumbnails" class="thumbnails">
+          <div class="thumbnail">
+            <pbo-image src="${((_a2 = this.card) == null ? void 0 : _a2.medias.cover.url) || "https://picsum.photos/id/1/300/400"}" alt="" />
+          </div>
+          <div class="thumbnail">
+            <pbo-image src="${((_b = this.card) == null ? void 0 : _b.medias.rendered_1.url) || "https://picsum.photos/id/10/300/400"}" alt="" />
+          </div>
+          <div class="thumbnail">
+            <pbo-image src="${((_c = this.card) == null ? void 0 : _c.medias.rendered_2.url) || "https://picsum.photos/id/10/300/400"}" alt="" />
+          </div>
+        </div>
 
         <div class="main-slide-container">
-          <ul>
-            <li class="main-slide" @click="${this.handleOpenZoomedClick}">
-              <img src="${((_d = this.card) == null ? void 0 : _d.medias.cover.url) || "https://picsum.photos/id/1/300/400"}" alt="" />
+          <div>
+            <div class="main-slide" @click="${this.handleOpenZoomedClick}">
+              <pbo-image src="${((_d = this.card) == null ? void 0 : _d.medias.cover.url) || "https://picsum.photos/id/1/300/400"}" alt="" />
               ${isMobileDevice() ? x$1`<div class="zoomed-preview-open-button" @click="${this.handleOpenZoomedClick}">
                     <svg
                       stroke="currentColor"
@@ -15820,8 +16109,8 @@ let PboEditorCardSlider$1 = class PboEditorCardSlider extends PairboElement {
                       <line x1="8" y1="11" x2="14" y2="11"></line>
                     </svg>
                   </div>` : ""}
-            </li>
-            <li class="main-slide" @click="${this.handleOpenZoomedClick}">
+            </div>
+            <div class="main-slide" @click="${this.handleOpenZoomedClick}">
               ${h2(
       this.type === "type" ? x$1`<pbo-type-canvas
                       background-url=${(_e2 = this.card) == null ? void 0 : _e2.medias.insert.url}
@@ -15856,9 +16145,9 @@ let PboEditorCardSlider$1 = class PboEditorCardSlider extends PairboElement {
                       <line x1="8" y1="11" x2="14" y2="11"></line>
                     </svg>
                   </div>` : ""}
-            </li>
-            <li class="main-slide" @click=${this.handleOpenZoomedClick}>
-              <img src="${((_k = this.card) == null ? void 0 : _k.medias.rendered_2.url) || "https://picsum.photos/id/10/300/400"}" alt="" />
+            </div>
+            <div class="main-slide" @click=${this.handleOpenZoomedClick}>
+              <pbo-image src="${((_k = this.card) == null ? void 0 : _k.medias.rendered_2.url) || "https://picsum.photos/id/10/300/400"}" alt="" />
               ${isMobileDevice() ? x$1`<div class="zoomed-preview-open-button" @click="${this.handleOpenZoomedClick}">
                     <svg
                       stroke="currentColor"
@@ -15878,8 +16167,8 @@ let PboEditorCardSlider$1 = class PboEditorCardSlider extends PairboElement {
                       <line x1="8" y1="11" x2="14" y2="11"></line>
                     </svg>
                   </div>` : ""}
-            </li>
-          </ul>
+            </div>
+          </div>
         </div>
       </div>
       <pbo-drawer
@@ -15931,9 +16220,10 @@ let PboEditorCardSlider$1 = class PboEditorCardSlider extends PairboElement {
     `;
   }
 };
-PboEditorCardSlider$1.styles = [componentStyles, styles$a, r$8(splideCss)];
+PboEditorCardSlider$1.styles = [componentStyles, styles$b, r$8(splideCss)];
 PboEditorCardSlider$1.dependencies = {
-  "fabric-example": FabricExample
+  "fabric-example": FabricExample,
+  "pbo-image": PboImage$1
 };
 __decorateClass$b([
   n$3({ type: Object })
@@ -16098,7 +16388,7 @@ let PboEditor$1 = class PboEditor extends PairboElement {
     `;
   }
 };
-PboEditor$1.styles = [componentStyles, styles$c];
+PboEditor$1.styles = [componentStyles, styles$d];
 PboEditor$1.dependencies = {
   "editor-card-slider": PboEditorCardSlider$1,
   "fabric-example": FabricExample,
@@ -19224,10 +19514,24 @@ let PboPageManager$1 = class PboPageManager extends PairboElement {
     };
   }
   handleSubmitTypeFormUpdate() {
-    this.editorEl.submitTypeForm = this.submitTypeForm;
+    this.editorEl.submitTypeForm = async (formData) => {
+      if (!this.submitTypeForm) return;
+      this.editorEl.typeForm.disabled = true;
+      this.editorEl.typeForm.loading = true;
+      await this.submitTypeForm(formData);
+      this.editorEl.typeForm.disabled = false;
+      this.editorEl.typeForm.loading = false;
+    };
   }
   handleSubmitHandwrittenFormUpdate() {
-    this.editorEl.submitHandwrittenForm = this.submitHandwrittenForm;
+    this.editorEl.submitHandwrittenForm = async (formData) => {
+      if (!this.submitHandwrittenForm) return;
+      this.editorEl.handwrittenForm.isSubmitDisabled = true;
+      this.editorEl.handwrittenForm.isSubmitLoading = true;
+      await this.submitHandwrittenForm(formData);
+      this.editorEl.handwrittenForm.isSubmitDisabled = false;
+      this.editorEl.handwrittenForm.isSubmitLoading = false;
+    };
   }
   handleGetProcessedImgUpdate() {
     this.editorEl.getProcessedImg = this.getProcessedImg;
@@ -19779,6 +20083,15 @@ let PboEditorSelector$1 = class PboEditorSelector extends PairboElement {
     this.hasSlotController = new HasSlotController(this, "help-text", "label");
     this.size = "medium";
     this.label = "";
+    this.disabled = false;
+  }
+  handleDisabledChanged() {
+    var _a2;
+    if (this._choices && this.disabled) {
+      this._choices.disable();
+    } else {
+      (_a2 = this._choices) == null ? void 0 : _a2.enable();
+    }
   }
   get value() {
     var _a2;
@@ -19786,6 +20099,7 @@ let PboEditorSelector$1 = class PboEditorSelector extends PairboElement {
   }
   firstUpdated() {
     this._initializeChoices();
+    this.handleDisabledChanged();
   }
   _initializeChoices() {
     var _a2;
@@ -19930,6 +20244,12 @@ __decorateClass$3([
 __decorateClass$3([
   n$3()
 ], PboEditorSelector$1.prototype, "label", 2);
+__decorateClass$3([
+  n$3({ type: Boolean, reflect: true })
+], PboEditorSelector$1.prototype, "disabled", 2);
+__decorateClass$3([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], PboEditorSelector$1.prototype, "handleDisabledChanged", 1);
 __decorateClass$3([
   e$5(".js-choice")
 ], PboEditorSelector$1.prototype, "choiceEl", 2);
@@ -19989,7 +20309,7 @@ let PboHandwrittenForm$1 = class PboHandwrittenForm extends PairboElement {
   constructor() {
     super(...arguments);
     this.card = null;
-    this.submitHandwrittenForm = (formData) => {
+    this.submitHandwrittenForm = async (formData) => {
       console.warn("submitHandwrittenForm not implemented", formData);
     };
     this.getProcessedImg = async (file) => {
@@ -19999,6 +20319,9 @@ let PboHandwrittenForm$1 = class PboHandwrittenForm extends PairboElement {
         masked_img: ""
       };
     };
+    this.isSubmitLoading = false;
+    this.isSubmitDisabled = false;
+    this.isImageProcessing = false;
     this.sourceImg = null;
     this.processedImg = {
       fileUrl: null,
@@ -20017,6 +20340,25 @@ let PboHandwrittenForm$1 = class PboHandwrittenForm extends PairboElement {
   showPicker() {
     this.imageInput.showPicker();
   }
+  setButtonsDisabled(disable) {
+    if (this.uploadButton && this.saveButton && this.reuploadButton) {
+      this.uploadButton.disabled = disable;
+      this.saveButton.disabled = disable;
+      this.reuploadButton.disabled = disable;
+    }
+  }
+  setButtonsLoading(loading) {
+    if (this.uploadButton && this.saveButton) {
+      this.uploadButton.loading = loading;
+      this.saveButton.loading = loading;
+    }
+  }
+  handleSubmitLoadingChange() {
+    this.setButtonsLoading(this.isSubmitLoading);
+  }
+  handleSubmitDisabledChange() {
+    this.setButtonsDisabled(this.isSubmitDisabled);
+  }
   handleSourceImgChange(oldFile, newFile) {
     this.processedFileUrl = null;
     if (oldFile !== newFile) {
@@ -20039,6 +20381,10 @@ let PboHandwrittenForm$1 = class PboHandwrittenForm extends PairboElement {
       }
     });
   }
+  handleImageProcessingChange() {
+    this.setButtonsDisabled(this.isImageProcessing);
+    this.setButtonsLoading(this.isImageProcessing);
+  }
   get formData() {
     var _a2, _b, _c, _d;
     const pixelsPerMMHeight = 177.8 / this.handwrittenDimensions.cardHeight;
@@ -20070,7 +20416,9 @@ let PboHandwrittenForm$1 = class PboHandwrittenForm extends PairboElement {
     const file = (_b = (_a2 = e3.target) == null ? void 0 : _a2.files) == null ? void 0 : _b[0];
     if (file == null) return;
     this.sourceImg = file;
+    this.isImageProcessing = true;
     const processedImage = await this.getProcessedImg(file);
+    this.isImageProcessing = false;
     this.processedFileUrl = `data:image/png;base64,${processedImage.masked_img}`;
   }
   handleSubmit(e3) {
@@ -20102,7 +20450,6 @@ let PboHandwrittenForm$1 = class PboHandwrittenForm extends PairboElement {
           @change=${this.handleFileChange}
           required
         />
-
         <div class="buttons-container">
           <pbo-button
             name="upload"
@@ -20111,7 +20458,7 @@ let PboHandwrittenForm$1 = class PboHandwrittenForm extends PairboElement {
             variant="primary"
             @click=${this.showPicker}
             style=${o$1({
-      display: !this.sourceImg && !this.processedFileUrl ? "block" : "none"
+      display: !this.processedFileUrl ? "block" : "none"
     })}
           >
             Upload Handwritten Image
@@ -20123,7 +20470,7 @@ let PboHandwrittenForm$1 = class PboHandwrittenForm extends PairboElement {
             variant="primary"
             class="submit-cta"
             style=${o$1({
-      display: this.sourceImg && this.processedFileUrl ? "block" : "none"
+      display: this.sourceImg && this.processedFileUrl && !this.isImageProcessing ? "block" : "none"
     })}
           >
             Save and Continue
@@ -20146,12 +20493,6 @@ let PboHandwrittenForm$1 = class PboHandwrittenForm extends PairboElement {
   }
 };
 PboHandwrittenForm$1.styles = [componentStyles, styles$2];
-__decorateClass$2([
-  e$5(".pixel-input")
-], PboHandwrittenForm$1.prototype, "imageInput", 2);
-__decorateClass$2([
-  e$5(".handwritten-form")
-], PboHandwrittenForm$1.prototype, "handwrittenForm", 2);
 __decorateClass$2([
   n$3()
 ], PboHandwrittenForm$1.prototype, "card", 2);
@@ -20161,6 +20502,30 @@ __decorateClass$2([
 __decorateClass$2([
   n$3()
 ], PboHandwrittenForm$1.prototype, "getProcessedImg", 2);
+__decorateClass$2([
+  n$3({ type: Boolean, reflect: true, attribute: "loading" })
+], PboHandwrittenForm$1.prototype, "isSubmitLoading", 2);
+__decorateClass$2([
+  n$3({ type: Boolean, reflect: true, attribute: "disabled" })
+], PboHandwrittenForm$1.prototype, "isSubmitDisabled", 2);
+__decorateClass$2([
+  e$5(".pixel-input")
+], PboHandwrittenForm$1.prototype, "imageInput", 2);
+__decorateClass$2([
+  e$5(".handwritten-form")
+], PboHandwrittenForm$1.prototype, "handwrittenForm", 2);
+__decorateClass$2([
+  e$5("pbo-button[name='upload']")
+], PboHandwrittenForm$1.prototype, "uploadButton", 2);
+__decorateClass$2([
+  e$5("pbo-button[name='save']")
+], PboHandwrittenForm$1.prototype, "saveButton", 2);
+__decorateClass$2([
+  e$5("pbo-button[name='reupload']")
+], PboHandwrittenForm$1.prototype, "reuploadButton", 2);
+__decorateClass$2([
+  r$3()
+], PboHandwrittenForm$1.prototype, "isImageProcessing", 2);
 __decorateClass$2([
   r$3()
 ], PboHandwrittenForm$1.prototype, "sourceImg", 2);
@@ -20173,12 +20538,21 @@ __decorateClass$2([
 __decorateClass$2([
   r$3()
 ], PboHandwrittenForm$1.prototype, "handwrittenDimensions", 2);
+__decorateClass$2([
+  watch("isSubmitLoading")
+], PboHandwrittenForm$1.prototype, "handleSubmitLoadingChange", 1);
+__decorateClass$2([
+  watch("isSubmitDisabled")
+], PboHandwrittenForm$1.prototype, "handleSubmitDisabledChange", 1);
 __decorateClass$2([
   watch("sourceImg")
 ], PboHandwrittenForm$1.prototype, "handleSourceImgChange", 1);
 __decorateClass$2([
   watch("processedFileUrl")
 ], PboHandwrittenForm$1.prototype, "handleProcessImageChange", 1);
+__decorateClass$2([
+  watch("isImageProcessing")
+], PboHandwrittenForm$1.prototype, "handleImageProcessingChange", 1);
 PboHandwrittenForm$1 = __decorateClass$2([
   t$3("pbo-handwritten-form")
 ], PboHandwrittenForm$1);
@@ -20814,6 +21188,8 @@ PboGiftOptions$1 = __decorateClass([
   t$3("pbo-gift-options")
 ], PboGiftOptions$1);
 const PboGiftOptions2 = PboGiftOptions$1;
+const PboSpinner2 = PboSpinner$1;
+const PboImage2 = PboImage$1;
 class PboBridge {
   /* ------------------------------- constructor ------------------------------ */
   constructor({
@@ -21026,10 +21402,12 @@ export {
   PboGiftOptions2 as PboGiftOption,
   PboHandwrittenCanvas2 as PboHandwrittenCanvas,
   PboHandwrittenForm2 as PboHandwrittenForm,
+  PboImage2 as PboImage,
   PboPageManager2 as PboPageManager,
   PboRadioButton2 as PboRadioButton,
   PboRadioGroup2 as PboRadioGroup,
   PboSelector,
+  PboSpinner2 as PboSpinner,
   PboTextarea2 as PboTextarea,
   PboTypeCanvas2 as PboTypeCanvas,
   PboTypeForm2 as PboTypeForm,