legalesign-document-viewer 0.7.1 → 0.7.2

package/dist/cjs/ls-title-input.cjs.entry.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var index = require('./index-Czv4Oowx.js');
+
+const lsTitleInputCss = () => `*{box-sizing:border-box;margin:0;padding:0}:host{display:block}.template-title{border-radius:0.5rem;padding:0 0.25rem;color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;cursor:pointer}.template-title:hover{background:var(--gray-10, #f7f8fa)}.editButton{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--gray-70)}.editButton:hover{color:var(--gray-80)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:2.25rem}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsTitleInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mutate = index.createEvent(this, "mutate", 7);
+    }
+    get component() { return index.getElement(this); }
+    template;
+    editTitle = false;
+    mutate;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff) {
+        this.debounce(diff, 500);
+    }
+    titletimer;
+    debounce(diff, delay) {
+        if (this.titletimer)
+            clearTimeout(this.titletimer);
+        this.titletimer = setTimeout(() => {
+            this.template = { ...this.template, ...diff };
+            const diffs = [{ action: 'update', data: this.template }];
+            this.mutate.emit(diffs);
+        }, delay);
+    }
+    render() {
+        return (index.h(index.Host, { key: '954a32dad8c48be15367eff9fa0adbb55234655b' }, this.editTitle ? (index.h("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, index.h("input", { value: this.template?.title, style: { height: '1.25rem', padding: '0 0.25rem', width: 'fit-content' }, onInput: e => {
+                e.preventDefault();
+                this.alter({ title: e.target.value });
+            }, onKeyUp: e => {
+                if (e.key === 'Enter' || e.keyCode === 13)
+                    this.editTitle = false;
+            } }), index.h("ls-icon", { name: "check", size: "1rem", class: 'editButton', onClick: () => {
+                this.editTitle = false;
+            } }))) : (index.h("div", { class: "template-title", onClick: () => {
+                this.editTitle = !this.editTitle;
+            } }, index.h("p", null, this.template?.title)))));
+    }
+};
+LsTitleInput.style = lsTitleInputCss();
+
+exports.ls_title_input = LsTitleInput;
+//# sourceMappingURL=ls-title-input.entry.cjs.js.map

package/dist/collection/collection-manifest.json

@@ -0,0 +1,65 @@
+{
+  "entries": [
+    "components/ls-editor-field/ls-editor-field.js",
+    "components/ls-document-viewer/ls-document-viewer.js",
+    "components/ls-compose-manager/ls-compose-manager.js",
+    "components/ls-document-options/ls-document-options.js",
+    "components/ls-editor-table/ls-editor-table.js",
+    "components/ls-feature-column/ls-feature-column.js",
+    "components/ls-field-alignment/ls-field-alignment.js",
+    "components/ls-field-content/ls-field-content.js",
+    "components/ls-field-dimensions/ls-field-dimensions.js",
+    "components/ls-field-distribute/ls-field-distribute.js",
+    "components/ls-field-footer/ls-field-footer.js",
+    "components/ls-field-format/ls-field-format.js",
+    "components/ls-field-placement/ls-field-placement.js",
+    "components/ls-field-properties/ls-field-properties.js",
+    "components/ls-field-properties-advanced/ls-field-properties-advanced.js",
+    "components/ls-field-properties-autosign/ls-field-properties-autosign.js",
+    "components/ls-field-properties-container/ls-field-properties-container.js",
+    "components/ls-field-properties-date/ls-field-properties-date.js",
+    "components/ls-field-properties-dropdown/ls-field-properties-dropdown.js",
+    "components/ls-field-properties-email/ls-field-properties-email.js",
+    "components/ls-field-properties-file/ls-field-properties-file.js",
+    "components/ls-field-properties-general/ls-field-properties-general.js",
+    "components/ls-field-properties-image/ls-field-properties-image.js",
+    "components/ls-field-properties-multiple/ls-field-properties-multiple.js",
+    "components/ls-field-properties-number/ls-field-properties-number.js",
+    "components/ls-field-properties-signature/ls-field-properties-signature.js",
+    "components/ls-field-properties-text/ls-field-properties-text.js",
+    "components/ls-field-size/ls-field-size.js",
+    "components/ls-field-type-display/ls-field-type-display.js",
+    "components/ls-formfield/ls-formfield.js",
+    "components/ls-formfield/inputs/ls-number-input/ls-number-input.js",
+    "components/ls-formfield/inputs/ls-radio-input/ls-radio-input.js",
+    "components/ls-formfield/inputs/ls-select-input/ls-select-input.js",
+    "components/ls-formfield/inputs/ls-text-input/ls-text-input.js",
+    "components/ls-formfield/inputs/ls-textarea-input/ls-textarea-input.js",
+    "components/ls-helper-bar/ls-helper-bar.js",
+    "components/ls-icon/ls-icon.js",
+    "components/ls-input-wrapper/ls-input-wrapper.js",
+    "components/ls-keyboard-shortcuts/ls-keyboard-shortcuts.js",
+    "components/ls-page-loader/ls-page-loader.js",
+    "components/ls-participant-card/ls-participant-card.js",
+    "components/ls-participant-manager/ls-participant-manager.js",
+    "components/ls-participant-select/ls-participant-select.js",
+    "components/ls-props-section/ls-props-section.js",
+    "components/ls-recipient-card/ls-recipient-card.js",
+    "components/ls-recipient-manager/ls-recipient-manager.js",
+    "components/ls-statusbar/ls-statusbar.js",
+    "components/ls-title-input/ls-title-input.js",
+    "components/ls-toggle/ls-toggle.js",
+    "components/ls-toolbar/ls-toolbar.js",
+    "components/ls-toolbox-field/ls-toolbox-field.js",
+    "components/ls-tooltip/ls-tooltip.js",
+    "components/ls-validation-manager/ls-validation-manager.js",
+    "components/ls-validation-tag/ls-validation-tag.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.39.0",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/interfaces/IToolboxField.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IToolboxField.js.map

package/dist/collection/components/interfaces/IToolboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IToolboxField.js","sourceRoot":"","sources":["../../../src/components/interfaces/IToolboxField.ts"],"names":[],"mappings":"","sourcesContent":["export interface IToolboxField {\n    label: string\n    elementType: string\n    defaultHeight: number\n    defaultWidth: number\n    formElementType: string\n    validation: number\n}"]}

package/dist/collection/components/ls-compose-manager/ls-compose-manager.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/ls-compose-manager/ls-compose-manager.js

@@ -0,0 +1,54 @@
+import { Host, h } from "@stencil/core";
+export class LsComposeManager {
+    /**
+     * The base template information (as JSON).
+     * {LSApiTemplate}
+     */
+    template;
+    render() {
+        return (h(Host, { key: '1c77d727d4f65f1a2e42c5808680e6a36936ba47' }, h("div", { key: 'f2b8d75d2418caf66e3e876f14a1d30a11995ae2', class: "ls-editor-infobox" }, h("h2", { key: '4e004575b6eb22bcfa36523d840c507799150500', class: "toolbox-section-title" }, "Recipient Fields"), h("p", { key: '2e1e2b675feea5eb15552af4ab49df79fdf26225', class: "toolbox-section-description" }, "Select and Click to place Signature fields where on the Document.")), h("div", { key: 'fcd3b08d87661571b03dba8e73f3ae24b8e622ed', class: "participant-list" }, this.template &&
+            this.template?.roles.map(() => {
+                return (h("div", null));
+            })), h("slot", { key: '1dc283d85b7d38ae9e1d784a09814b2ec0482fc9' })));
+    }
+    static get is() { return "ls-compose-manager"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-compose-manager.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-compose-manager.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "template": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LSApiTemplate",
+                    "resolved": "{ id: string; title: string; pageCount: number; fileName: string; link: string; autoArchive: boolean; valid: boolean; locked: boolean; tags: string[]; groupId: string; roles: LSApiRole[]; canOpenSign: boolean; directLinks: []; elementConnection: { templateElements: LSApiElement[]; totalCount: number; }; elements: LSApiElement[]; createdBy: string; created: Date; modified: Date; lastSent: Date; pageDimensionArray: [number, number][]; pageDimensions: string; fixSignatureScale?: boolean; documentRetentionDays: number; }",
+                    "references": {
+                        "LSApiTemplate": {
+                            "location": "import",
+                            "path": "../../types/LSApiTemplate",
+                            "id": "src/types/LSApiTemplate.ts::LSApiTemplate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The base template information (as JSON).\n{LSApiTemplate}"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=ls-compose-manager.js.map

package/dist/collection/components/ls-compose-manager/ls-compose-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-compose-manager.js","sourceRoot":"","sources":["../../../src/components/ls-compose-manager/ls-compose-manager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,gBAAgB;IAE3B;;;OAGG;IACK,QAAQ,CAAgB;IAEhC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACD,4DAAK,KAAK,EAAC,mBAAmB;gBAC9B,2DAAI,KAAK,EAAC,uBAAuB,uBAAsB;gBACvD,0DAAG,KAAK,EAAC,6BAA6B,wEAAsE,CACxG;YACN,4DAAK,KAAK,EAAC,kBAAkB,IAC1B,IAAI,CAAC,QAAQ;gBACZ,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE;oBAC5B,OAAO,CACL,cAAS,CACV,CAAC;gBACJ,CAAC,CAAC,CACA;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\n\n\n@Component({\n  tag: 'ls-compose-manager',\n  styleUrl: 'ls-compose-manager.css',\n  shadow: true,\n})\nexport class LsComposeManager {\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\n\n  render() {\n    return (\n      <Host>\n          <div class=\"ls-editor-infobox\">\n          <h2 class=\"toolbox-section-title\">Recipient Fields</h2>\n          <p class=\"toolbox-section-description\">Select and Click to place Signature fields where on the Document.</p>\n        </div>\n        <div class=\"participant-list\">\n          {this.template &&\n            this.template?.roles.map(() => {\n              return (\n                <div   />\n              );\n            })}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-document-options/ls-document-options.css

@@ -0,0 +1,386 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:host {
+  display: block;
+}
+
+.ls-editor-infobox {
+  padding: 0.125rem 0.5rem 0.125rem 0.5rem;
+}
+
+.toolbox-section-title {
+  color: var(--gray-100, #45484d);
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.75rem; /* 155.556% */
+}
+
+.toolbox-section-description {
+  color: var(--gray-80, #5e6066);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.template-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.template-detail-section {
+  position: relative;
+  display: flex;
+  padding: 0.75rem;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 1rem;
+  border: 1px solid var(--gray-30, #e0e2e5);
+  background: var(--white, #fff);
+}
+
+.template-detail-section-title {
+  color: var(--gray-80, #6c6e73);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+  width: 100%;
+}
+
+.template-detail-section-info {
+  color: var(--gray-70);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem; /* 142.857% */
+  width: 100%;
+}
+
+.template-title {
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem; /* 150% */
+  cursor: pointer;
+  width: 100%;
+  margin-top: -0.125rem;
+
+}
+
+.template-title:hover {
+  background: var(--gray-10, #f7f8fa);
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start
+}
+
+.editButton {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  margin: 0px;
+  padding: 0px;
+  max-height: 1.25rem !important;
+  max-width: 1.25rem !important;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--gray-70, #2134dc);
+}
+
+.editButton:hover {
+  color: var(--gray-80);
+}
+
+/* Global Styles */
+
+p {
+  color: var(--gray-80, #6c6e73);
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line-height);
+}
+
+a {
+  color: var(--primary-60, #4456f6);
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line-height);
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: var(--primary-70, #2134dc);
+}
+
+.button-link,
+.button-link:hover {
+  all: unset;
+}
+
+select {
+  appearance: none;
+  height: 2.25rem;
+}
+
+.input-wrapper {
+  position: relative;
+  width: fit-content;
+}
+
+#selectorIcon {
+  position: absolute;
+  top: 50%;
+  right: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+#selectLeadingIcon {
+  position: absolute;
+  top: 50%;
+  left: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+.has-leading-icon {
+  padding-left: 2.5rem;
+}
+
+input,
+select,
+textarea {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  border-radius: 0.5rem;
+  color: var(--gray-100, #45484d);
+  font-weight: 400;
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder {
+  color: var(--gray-60, #afb0b2);
+}
+
+input:hover,
+select:hover,
+textarea:hover {
+  border-color: var(--gray-50, #c8c9cc);
+  background-color: var(--white, #fff);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);
+  border-color: var(--primary-60, #4456f6);
+  background-color: var(--white, #fff);
+}
+
+input:active,
+select:active,
+textarea:active {
+  border-color: var(--primary-50, #5185ff);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  background-color: var(--gray-10, #f7f8fa);
+}
+
+input[type='checkbox'] {
+  appearance: none;
+  position: relative;
+  height: 1rem;
+  width: 1rem;
+  padding: 0.25rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid #d1d5db;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+input[type='checkbox']:checked,
+input[type='checkbox'].indeterminate {
+  background-color: var(--primary-60, #4456f6);
+  border: none;
+}
+
+input[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);
+  width: 0.5rem;
+  height: 0.25rem;
+  border-bottom: 0.125rem solid white;
+  border-right: 0.125rem solid white;
+}
+
+input[type='checkbox'].indeterminate::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.5rem;
+  height: 0.125rem;
+  background-color: white;
+}
+
+input[type='checkbox']:checked:hover,
+input[type='checkbox'].indeterminate:hover {
+  background-color: var(--primary-70, #2134dc);
+  border: none;
+}
+
+input[type='checkbox']:hover {
+  border: 1px solid #9ca3af;
+}
+
+input[type='checkbox']:focus,
+input[type='checkbox']:active {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);
+  background-color: #f0f4f8;
+}
+
+input[type='checkbox']:disabled {
+  background-color: #f3f4f6;
+  outline: none;
+  cursor: not-allowed;
+}
+
+input[type='checkbox']:disabled:checked {
+  background-color: #e5e7eb;
+  border: none;
+  outline: none;
+  cursor: not-allowed;
+}
+
+.checkbox-container {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.checkbox-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.form-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.loading-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  color: var(--primary-60, #0c7cba);
+}
+
+button {
+  border: 0;
+  appearance: button;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg);
+  background-color: var(--primary-60, #4456f6);
+  color: white;
+  text-transform: capitalize;
+  min-height: 2.25rem;
+  min-width: 2.25rem;
+}
+
+button.tertiaryGrey {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background-color: white;
+  color: var(--gray-80, #787a80);
+}
+
+button.tertiaryGrey:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-group {
+  display: flex;
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-30, #e0e2e5);
+  background: var(--white, #ffffff);
+  overflow: clip;
+}
+
+.button-group button {
+  display: flex;
+  background: transparent;
+  border-radius: unset;
+  padding: 0.25rem 0.75rem;
+  min-width: 2.156rem;
+  min-height: unset;
+  color: var(--gray-80, #6c6e73);
+}
+
+.button-group button:hover {
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-group > :first-child {
+  border-radius: 0.5rem 0 0 0.5rem;
+}
+
+.button-group > :last-child {
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+.button-group > :not(:first-child) {
+  border-left: 1px solid var(--gray-30, #e0e2e5);
+}
+