@globalpayments/vega 2.18.1 → 2.19.0

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.css

@@ -34,13 +34,16 @@
 :host(:not(.click-step-disabled)) .vega-progress-step.default:active .vega-progress-step__icon {
   background-color: rgba(var(--v-bg-action-quaternary-active, 205, 209, 211, 1));
 }
-:host(:not(.click-step-disabled)) .vega-progress-step.inProgress .vega-progress-step__icon:hover {
+:host(:not(.click-step-disabled)) .vega-progress-step.inProgress .vega-progress-step__icon:hover,
+:host(:not(.click-step-disabled)) .vega-progress-step.current .vega-progress-step__icon:hover {
   background-color: rgba(var(--v-bg-action-hover, 4, 112, 236, 1));
 }
-:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:hover .vega-progress-step__icon {
+:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:hover .vega-progress-step__icon,
+:host(:not(.click-step-disabled)) .vega-progress-step.current:hover .vega-progress-step__icon {
   background-color: rgba(var(--v-bg-action-hover, 4, 112, 236, 1));
 }
-:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:active .vega-progress-step__icon {
+:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:active .vega-progress-step__icon,
+:host(:not(.click-step-disabled)) .vega-progress-step.current:active .vega-progress-step__icon {
   background-color: rgba(var(--v-bg-action-active, 29, 65, 195, 1));
 }
 :host(:not(.click-step-disabled)) .vega-progress-step.complete:hover .vega-progress-step__icon {
@@ -55,6 +58,9 @@
 :host(:not(.click-step-disabled)) .vega-progress-step.complete:active .vega-progress-step__icon vega-icon {
   color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
 }
+:host(:not(.click-step-disabled)) .vega-progress-step.complete.current .vega-progress-step__icon vega-icon {
+  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
+}
 
 :host .vega-progress-step:focus-visible {
   outline-width: 0px;
@@ -199,12 +205,14 @@
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
 }
 
-:host .vega-progress-step.inProgress .vega-progress-step__icon {
+:host .vega-progress-step.inProgress .vega-progress-step__icon,
+:host .vega-progress-step.current .vega-progress-step__icon {
   background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
   color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
   box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
 }
-:host .vega-progress-step.inProgress .vega-progress-step__title {
+:host .vega-progress-step.inProgress .vega-progress-step__title,
+:host .vega-progress-step.current .vega-progress-step__title {
   font-family: "Inter", sans-serif;
   font-size: 16px;
   font-weight: 700;
@@ -213,7 +221,8 @@
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  :host .vega-progress-step.inProgress .vega-progress-step__title {
+  :host .vega-progress-step.inProgress .vega-progress-step__title,
+  :host .vega-progress-step.current .vega-progress-step__title {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 700;
@@ -222,7 +231,8 @@
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  :host .vega-progress-step.inProgress .vega-progress-step__title {
+  :host .vega-progress-step.inProgress .vega-progress-step__title,
+  :host .vega-progress-step.current .vega-progress-step__title {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 700;
@@ -231,7 +241,8 @@
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  :host .vega-progress-step.inProgress .vega-progress-step__title {
+  :host .vega-progress-step.inProgress .vega-progress-step__title,
+  :host .vega-progress-step.current .vega-progress-step__title {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 700;

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.js

@@ -71,12 +71,12 @@ export class VegaProgressTracker {
      */
     this.canClickStep = true;
     this.getStepState = (index) => {
-      if (index === this.current) {
-        return ProgressStepStatus.IN_PROGRESS;
-      }
-      else if (this.deprecatedPropertySlimmer.getValue().includes(this.steps[index])) {
+      if (this.deprecatedPropertySlimmer.getValue().includes(this.steps[index])) {
         return ProgressStepStatus.COMPLETE;
       }
+      else if (index === this.current) {
+        return ProgressStepStatus.IN_PROGRESS;
+      }
       else {
         return ProgressStepStatus.DEFAULT;
       }
@@ -94,7 +94,7 @@ export class VegaProgressTracker {
       const prevStepCompleteStatus = this.deprecatedPropertySlimmer
         .getValue()
         .includes(this.steps[index - 1]);
-      return (h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${progressStepStatus}`, "data-index": index, tabIndex: !this.canClickStep ? null : 0, onClick: !this.canClickStep ? null : this.onStepIconClick, onKeyDown: !this.canClickStep ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": subTitle },
+      return (h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${progressStepStatus} ${index === this.current ? 'current' : ''}`, "data-index": index, tabIndex: !this.canClickStep ? null : 0, onClick: !this.canClickStep ? null : this.onStepIconClick, onKeyDown: !this.canClickStep ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": subTitle },
         h("div", { class: "vega-progress-step-icon-divider" },
           h("div", { class: `vega-progress-step__divider left ${prevStepCompleteStatus ? 'background' : ''}` }),
           this.renderStepIcon(index, progressStepStatus),

package/dist/collection/components/vega-signature-capture/assets/icons.js

@@ -0,0 +1,5 @@
+export const Icons = {
+  signature: {
+    icon: `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M176 128c0-26.5 21.5-48 48-48s48 21.5 48 48v7.9c0 27.5-2.3 55-7 82.1L158 251.1c-36.9 11.4-62 45.5-62 84.1V410c0 38.6 31.3 70 70 70c24.6 0 47.4-12.9 60-34l15.9-26.4c29.6-49.4 51.1-103.3 63.6-159.5l1-4.7 110.8-34.3-23.9 66.8c-2.6 7.4-1.5 15.5 3 21.9s11.8 10.2 19.6 10.2H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H450.1l28.5-79.9c3.1-8.6 1-18.1-5.3-24.7s-15.7-9-24.4-6.3l-133 41.2c2.7-22 4.1-44.2 4.1-66.4V128c0-53-43-96-96-96s-96 43-96 96v40c0 13.3 10.7 24 24 24s24-10.7 24-24V128zm-3.8 169l80.9-25c-11.7 43.2-29.4 84.5-52.4 123l-15.9 26.4c-4 6.6-11.1 10.7-18.8 10.7c-12.1 0-22-9.8-22-22V335.2c0-17.5 11.4-33 28.2-38.2zM64 368H24c-13.3 0-24 10.7-24 24s10.7 24 24 24H64.2c-.1-2-.2-4-.2-6V368zm216.8 48H616c13.3 0 24-10.7 24-24s-10.7-24-24-24H304.1c-7 16.3-14.8 32.4-23.3 48z"/></svg>`,
+  },
+};

package/dist/collection/components/vega-signature-capture/slimmers/renderers/vega-signature-capture-renderer.js

@@ -0,0 +1,19 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h, Host } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+export class VegaSignatureCaptureRenderer extends VegaSlimmer {
+  render() {
+    return h(Host, null, this.mode === 'written' && this.writtenModeRenderer.render());
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaSignatureCaptureRenderer.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSignatureCaptureRenderer.prototype, "writtenModeRenderer", void 0);

package/dist/collection/components/vega-signature-capture/slimmers/written-mode/controllers/written-mode-svg-controller.js

@@ -0,0 +1,220 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import ChangeManager from '../../../../../helpers/change-manager/changeManager';
+import { deepEqual } from '../../../../../utils/object';
+/**
+ * Signature written mode controller
+ */
+export class WrittenModeSvgController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.penWidth = '4px';
+    /**
+     * Clear the signature
+     */
+    this.clear = () => {
+      this.signatureContainerRef.innerHTML = '';
+      this.value = null;
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-signature-capture-on-draw-signature}
+     */
+    /* istanbul ignore next */
+    /**
+     * Start drawing the current path
+     *
+     * @param {MouseEvent} e - MouseEvent
+     */
+    this.startDrawing = (e) => {
+      if (this.disabled)
+        return;
+      this.isDrawing = true;
+      const { x, y } = this.getPoint(e);
+      this.currentPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      this.currentPath.setAttribute('d', `M ${x} ${y}`);
+      Object.assign(this.currentPath.style, {
+        stroke: 'rgba(4, 4, 28, 1)',
+        strokeWidth: this.penWidth,
+        fill: 'none',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+      });
+      this.signatureContainerRef.appendChild(this.currentPath);
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-signature-capture-on-draw-signature}
+     */
+    /* istanbul ignore next */
+    /**
+     * Get the current mouse position
+     *
+     * @param {MouseEvent | TouchEvent} e - MouseEvent on desktop or TouchEvent on mobile
+     * @returns {VegaSignatureMousePosition} - Current mouse position
+     */
+    this.getPoint = (e) => {
+      const rect = this.signatureContainerRef.getBoundingClientRect();
+      const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+      const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+      return {
+        x: clientX - rect.left,
+        y: clientY - rect.top,
+      };
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-signature-capture-on-draw-signature}
+     */
+    /* istanbul ignore next */
+    /**
+     * Draw the current path to the end point
+     *
+     * @param {MouseEvent} e - Mouse event
+     */
+    this.draw = (e) => {
+      if (!this.isDrawing)
+        return;
+      const { x, y } = this.getPoint(e);
+      const d = this.currentPath.getAttribute('d');
+      this.currentPath.setAttribute('d', `${d} L ${x} ${y}`);
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-signature-capture-on-draw-signature}
+     */
+    /* istanbul ignore next */
+    /**
+     * Stop drawing and update the value
+     */
+    this.stopDrawing = () => {
+      if (!this.isDrawing)
+        return;
+      this.isDrawing = false;
+      this.value = { type: 'written', img: this.generateSignatureImage() };
+    };
+  }
+  /**
+   * Setup written listeners
+   */
+  componentDidLoad() {
+    this.setupListeners();
+    this.fillSignature(this.value);
+  }
+  /**
+   * Clear the signature
+   */
+  handleClear() {
+    this.clear();
+  }
+  /**
+   * Emit the vegaChange event when value changed
+   *
+   * @param {VegaSignatureValue} newValue - The `newValue` parameter is a object representing the new value for the signature capture.
+   * @param {VegaSignatureValue} oldValue - The `oldValue` parameter is a object representing the old value for the signature capture.
+   */
+  watchValue(newValue, oldValue) {
+    if (deepEqual(newValue, oldValue))
+      return;
+    this.changeEventEmitter.emit(newValue);
+    this.fillSignature(newValue);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: newValue,
+    });
+  }
+  /**
+   * Set the signature container ref
+   *
+   * @param {SVGElement} ref - signature container ref
+   */
+  setSignatureContainerRef(ref) {
+    this.signatureContainerRef = ref;
+  }
+  /**
+   * Setup the listeners, for desktop and mobile
+   */
+  setupListeners() {
+    const container = this.signatureContainerRef;
+    container.addEventListener('mousedown', this.startDrawing);
+    container.addEventListener('mousemove', this.draw);
+    container.addEventListener('mouseup', this.stopDrawing);
+    container.addEventListener('mouseleave', this.stopDrawing);
+    // For mobile
+    container.addEventListener('touchstart', this.startDrawing);
+    container.addEventListener('touchmove', this.draw);
+    container.addEventListener('touchend', this.stopDrawing);
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-signature-capture-on-draw-signature}
+   */
+  /* istanbul ignore next */
+  /**
+   * Generate the signature base64 image string
+   *
+   * @returns {string} - base64 image string
+   */
+  generateSignatureImage() {
+    const serializer = new XMLSerializer();
+    const svgData = serializer.serializeToString(this.signatureContainerRef);
+    const base64Svg = btoa(unescape(encodeURIComponent(svgData)));
+    return `data:image/svg+xml;base64,${base64Svg}`;
+  }
+  /**
+   * Parse the value to svg
+   *
+   * @param {VegaSignatureValue} value - Signature value
+   * @returns {Nullable<HTMLElement>} - SVG element
+   */
+  fromDataURL(value) {
+    if (!value || !value.img)
+      return;
+    const base64Svg = this.value.img.replace('data:image/svg+xml;base64,', '');
+    return new DOMParser().parseFromString(atob(base64Svg), 'image/svg+xml').documentElement;
+  }
+  /**
+   * Fill the signature from the value.
+   * Not fill the signature if the signature container already has child nodes, that means in written status.
+   *
+   * @param {VegaSignatureValue} value - Signature value
+   */
+  fillSignature(value) {
+    this.signatureContainerRef.replaceChildren();
+    const signature = this.fromDataURL(value);
+    if (signature) {
+      const paths = Array.from(signature.childNodes);
+      this.signatureContainerRef.append(...paths);
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], WrittenModeSvgController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeSvgController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], WrittenModeSvgController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], WrittenModeSvgController.prototype, "isDrawing", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeSvgController.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], WrittenModeSvgController.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('clear')
+], WrittenModeSvgController.prototype, "handleClear", null);
+__decorate([
+  MapToComponentMethod('watchValue')
+], WrittenModeSvgController.prototype, "watchValue", null);

package/dist/collection/components/vega-signature-capture/slimmers/written-mode/renderers/written-mode-renderer.js

@@ -0,0 +1,104 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+import { VegaClick } from '../../../../../helpers/event-manager/eventID/vegaEventId';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { Icons } from '../../../assets/icons';
+export class WrittenModeRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-signature-capture-focus-e2e}
+     */
+    /* istanbul ignore next */
+    this.signatureCaptureFocus = () => {
+      this.signatureCaptureContainerRef.focus();
+    };
+  }
+  getSignatureCaptureContainer() {
+    return this.signatureCaptureContainerRef;
+  }
+  render() {
+    return (h("vega-flex", { direction: "col", gap: "size-8" },
+      this.renderLabel(),
+      this.renderContainer(),
+      this.renderFooter()));
+  }
+  renderLabel() {
+    return (this.label && (h("vega-field-label", { onClick: this.signatureCaptureFocus, isFieldRequired: this.required, label: this.label, disabled: this.disabled })));
+  }
+  renderContainer() {
+    return (h("div", { class: {
+        'signature-capture-written-container': true,
+        'disabled': this.disabled,
+      }, "aria-label": "Please sign here", role: "textbox", tabIndex: this.disabled ? -1 : 0, ref: (ref) => (this.signatureCaptureContainerRef = ref) },
+      this.renderPlaceholder(),
+      this.renderSignaturePad()));
+  }
+  renderPlaceholder() {
+    if (this.isDrawing || this.value)
+      return;
+    return (this.placeholder && (h("vega-flex", { class: "placeholder-container", gap: "size-8", justifyContent: "center", alignItems: "center", margin: {
+        left: 'size-24',
+        right: 'size-24',
+      } },
+      this.placeholderIcon && (h("vega-icon", { class: "placeholder-container-icon", size: "size-20", color: "text-secondary", icon: this.placeholderIcon })),
+      h("div", { class: "placeholder-container-content" }, this.placeholder))));
+  }
+  /*
+   * When the clear button is displayed, since the error message and the clear button are in the same line, this element is displayed.
+   */
+  renderSignaturePad() {
+    return (h("svg", { style: { width: '100%', height: '320px', touchAction: 'none' }, ref: (ref) => this.writtenModeSvgController.setSignatureContainerRef(ref) }));
+  }
+  renderFooter() {
+    return (this.showClearBtn && (h("vega-flex", { class: "signature-capture-written-footer", justifyContent: "space-between" },
+      h("div", { class: "vega-error vega-hidden vega-error-content" }),
+      this.renderClearBtn())));
+  }
+  renderClearBtn() {
+    return (h("div", { class: "clear-button" },
+      h("vega-button-link", { size: "small", disabled: this.disabled, ref: (ref) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+            this.writtenModeSvgController.clear();
+          });
+        } }, "Clear Signature")));
+  }
+}
+(() => {
+  VegaInternalIconManager.register(Icons);
+})();
+__decorate([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "label", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "showClearBtn", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "placeholder", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "placeholderIcon", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "isDrawing", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "writtenModeSvgController", void 0);

package/dist/collection/components/vega-signature-capture/vega-signature-capture.css

@@ -0,0 +1,154 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host {
+  display: block;
+}
+
+.signature-capture-written-container {
+  border: 1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));
+  border-radius: 8px;
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+  background-color: rgb(252, 252, 252);
+}
+.signature-capture-written-container:hover {
+  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
+}
+.signature-capture-written-container:focus-within {
+  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
+}
+.signature-capture-written-container .placeholder-container {
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  pointer-events: none;
+}
+.signature-capture-written-container .placeholder-container-content {
+  font-family: "Inter", sans-serif;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 28px;
+  letter-spacing: 0px;
+  color: rgba(4, 4, 28, 0.64);
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .signature-capture-written-container .placeholder-container-content {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .signature-capture-written-container .placeholder-container-content {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  .signature-capture-written-container .placeholder-container-content {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0px;
+  }
+}
+.signature-capture-written-container .placeholder-container-icon {
+  flex-shrink: 0;
+  color: rgba(4, 4, 28, 0.64);
+}
+.signature-capture-written-container.error {
+  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
+}
+.signature-capture-written-container.error:hover {
+  border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
+}
+.signature-capture-written-container.error:focus-within {
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
+  border: 1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1));
+}
+.signature-capture-written-container.disabled {
+  background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
+  border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
+}
+.signature-capture-written-container.disabled:hover, .signature-capture-written-container.disabled:focus-within {
+  border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
+}
+.signature-capture-written-container.disabled:focus-within {
+  outline: none;
+}
+.signature-capture-written-container.disabled .placeholder-container-content,
+.signature-capture-written-container.disabled .placeholder-container-icon {
+  color: rgba(var(--v-text-input-disabled, 107, 116, 125, 1));
+}
+
+.signature-capture-written-footer .clear-button {
+  flex-grow: 1;
+  padding-right: 8px;
+  text-align: right;
+}
+.signature-capture-written-footer .vega-error-content {
+  padding-top: 0px;
+  padding-right: 0px;
+  flex-grow: 1;
+}
+
+.vega-error {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  color: rgba(var(--v-text-error, 189, 41, 71, 1));
+  display: block;
+  padding-right: 8px;
+  padding-left: 8px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+
+.vega-hidden {
+  display: none;
+}