legalesign-document-viewer 0.1.1 → 0.1.2

package/dist/collection/components/ls-statusbar/ls-statusbar.css

@@ -1,14 +1,198 @@
 :host {
+  position: fixed;
+  z-index: 1000;
+  right: 1rem;
+  bottom: 1rem;
   display: flex;
   flex-direction: row;
-  bottom: 0px;
-  height: 47px;
-  min-height: 47px;
+  background-color: white;
+  border: 1px solid var(--gray-30, #e0e2e5);
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
+  border-radius: 1rem;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.status-bar-section {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+}
+
+:host > :not(:nth-child(2)) {
+  border-left: 1px solid var(--gray-30, #e0e2e5);
+}
+
+button {
+  border: 0;
+}
+
+button:hover {
+  color: var(--gray-100, #45484d);
+  border-radius: 0.5rem;
+}
+
+input[type="range"] {
+  -webkit-appearance: none; /* Remove default styling */
   width: 100%;
-  background-color: rgb(205, 205, 205);
-  border-top: 2px outset rgb(208, 208, 208);
+  height: 8px;
+  background: var(--gray-20, #EDEFF2);
+  border-radius: 5px;
+  outline: none;
+}
+
+/* Chrome, Safari, Edge */
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 8px;
+  height: 8px;
+  background: var(--gray-70, #4a4c51); /* Custom thumb color */
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* Firefox */
+input[type="range"]::-moz-range-thumb {
+  width: 8px;
+  height: 8%;
+  background: var(--gray-70, #4a4c51); /* Custom thumb color */
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* Track color for Firefox */
+input[type="range"]::-moz-range-track {
+  background: var(--gray-20, #EDEFF2);
+  height: 8px;
+  border-radius: 5px;
+}
+
+/* Track color for Chrome, Safari, Edge */
+input[type="range"]::-webkit-slider-runnable-track {
+  background: var(--gray-20, #EDEFF2);
+  height: 8px;
+  border-radius: 5px;
+}
+
+
+
+/* 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: 36px;
+}
+
+.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;
 }
 
 button {
+  all: unset;
   border: 0;
+  appearance: button;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-80, #6c6e73);
+  text-transform: capitalize;
+}
+
+button.tertiaryGrey:hover {
+  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);
+}
+

package/dist/collection/components/ls-statusbar/ls-statusbar.js

@@ -3,21 +3,21 @@ import { debounce } from "../ls-document-viewer/editorUtils";
 export class LsStatusbar {
     component;
     /**
-  * The zoom or scale level 100 === 100%.
-  * {number}
-  */
+     * The zoom or scale level 100 === 100%.
+     * {number}
+     */
     zoom;
     /**
-  * The parent editor control.
-  * {LsDocumentViewer}
-  */
+     * The parent editor control.
+     * {LsDocumentViewer}
+     */
     editor;
     setZoom(value) {
         this.editor.setZoom(value);
         this.zoom = value;
     }
     handleZoomInput() {
-        const zoomInput = this.component.shadowRoot.getElementById("zoomRange");
+        const zoomInput = this.component.shadowRoot.getElementById('zoomRange');
         console.log(zoomInput.value);
         debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);
     }
@@ -35,7 +35,12 @@ export class LsStatusbar {
         this.zoom = this.editor.zoom;
     }
     render() {
-        return (h(Host, { key: '1f26d30289745bb8619be128f0a43aee6fbfaad6' }, h("button", { key: 'e6b482db5478cd6c171d235b8fc36e22e89ffcba', onClick: () => this.fitWidth() }, h("ls-icon", { key: '1d139fe1e079e68dd80c3de34b1f6b8cfa4051d3', name: "fit-width" })), h("button", { key: '26c70cc9b99ddb3b34e5ed7fe2acb22b38f8f417', onClick: () => this.fitHeight() }, h("ls-icon", { key: '4e084bb4031b6be28cf0b4b1ea42f617a3644b06', name: "fit-height" })), h("button", { key: '1e09e0cd52161dfd6006dad203e4d381a027d59d', onClick: () => { this.editor.pagePrev(); } }, h("ls-icon", { key: 'c66f3bbd7858e6e383239f5c2873c7a73d4e7ed6', name: "arrow-left" })), h("button", { key: '35bc8c654e4ffc89a9968962583478ade7ce6375', onClick: () => { this.editor.pageNext(); } }, h("ls-icon", { key: '91a8775143d6657db9dee582a62176b820b30c8d', name: "arrow-right" })), h("button", { key: 'f78d96914c9ee810002277693d02226c6f890d14', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: '5efba57ce03b91710d3b9099abbf7cf6aa5ff822', name: "zoom-out" })), h("div", { key: '45c33e013da3f13b1abf233e3a9ee8dbe6cc3887' }, h("input", { key: '1c690876e3623a66c37883fa08fa8b8d64d1e734', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '339ceece474851976412a4b667536757f58b9442', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: '598d8f9fa8909b196f2f1783e4a3ecc0ae08baea', name: "zoom-in" })), h("slot", { key: '2a370d5e0f96fd61773a61aaecbc7570b18bba9d' })));
+        console.log('editor', this.editor);
+        return (h(Host, { key: 'ea525e6f8646c08be30354b2f2d1d36e21c995ba' }, h("div", { key: 'cf4cf005f20ce4bf620fb83b5cf7d02e230feb53', class: "status-bar-section" }, h("button", { key: '9f1921447fdea726f82dffad74ff88920d79f487', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: 'e5d681a4c0bb88dd69b39e931beb15df5d3a8548', name: "zoom-out" })), h("div", { key: '2655a0d7eb16c14bd67a546bbc000b6b42458b98' }, h("input", { key: 'def758649e35599d62bdfd064459f077332bd14e', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '229d1430e6e95636e962bf6b3d6e36c6ae235cb9', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: 'e7447b83ec8771b3284f7d2dfd9041c90fdcdb59', name: "zoom-in" }))), h("div", { key: 'cedaa23937a88d80777f8edce525408b0135d614', class: "status-bar-section" }, h("button", { key: 'f80d6ed2eed2ea8e51e64bb8a364be438ed19dcf', onClick: () => this.fitWidth() }, h("ls-icon", { key: '41558075bd1aa98e5d6318b691f2d6f40d526144', name: "fit-width" })), h("button", { key: '22028567cd63cf80157342f6b8af5039eb880c56', onClick: () => this.fitHeight() }, h("ls-icon", { key: '31dfcbaeb893d14b54798758207dd01c3276d7f0', name: "fit-height" }))), h("div", { key: '51a2d7a31fafd9e4cc408b92a92ceca3c672697d', class: "status-bar-section" }, h("button", { key: 'e7f179826b17caa8674a0f80a0de000ccebfb318', onClick: () => {
+                this.editor.pagePrev();
+            } }, h("ls-icon", { key: 'f76093367b1ae81db37d0621722703e42407ba84', name: "chevron-left" })), h("p", { key: '72f7ddb0e090c946df6c7e47cdd45f3074f73d68' }, "1 / 2"), h("button", { key: 'f83e36917ed5082ac865aee641c4ced4d39f4ba0', onClick: () => {
+                this.editor.pageNext();
+            } }, h("ls-icon", { key: '877c0a545d80a06964a9d1ac34019f0c6361cd6f', name: "chevron-right" }))), h("slot", { key: '7110433cf65751673c3ae4d47257b296086fda1c' })));
     }
     static get is() { return "ls-statusbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-statusbar/ls-statusbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ls-statusbar.js","sourceRoot":"","sources":["../../../src/components/ls-statusbar/ls-statusbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-statusbar',\n  styleUrl: 'ls-statusbar.css',\n  shadow: true,\n})\nexport class LsStatusbar {\n  @Element() component: HTMLElement;\n  /**\n* The zoom or scale level 100 === 100%.\n* {number}\n*/\n  @Prop({ mutable: true }) zoom: number\n\n  /**\n* The parent editor control.\n* {LsDocumentViewer}\n*/\n  @Prop() editor: LsDocumentViewer;\n\n  setZoom(value: number) {\n    this.editor.setZoom(value)\n    this.zoom = value\n  }\n\n  handleZoomInput() {\n    const zoomInput = this.component.shadowRoot.getElementById(\"zoomRange\") as HTMLInputElement\n    console.log(zoomInput.value)\n    debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700)\n\n  }\n\n  fitWidth() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame')\n    const scale: number = frame.clientWidth / this.editor.pageDimensions[0].width;\n    this.setZoom( Math.round( scale  * 1e2) / 1e2 )\n  }\n\n\n  fitHeight() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame')\n    const scale: number = frame.clientHeight / this.editor.pageDimensions[0].height\n    this.setZoom( Math.round( scale  * 1e2) / 1e2 )\n  }\n\n  componentDidLoad() {\n    this.zoom = this.editor.zoom\n  }\n\n  render() {\n    return (\n      <Host>\n\n        {/* <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n        <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button> */}\n\n\n        <button onClick={() => this.fitWidth()}><ls-icon name=\"fit-width\" /></button>\n        <button onClick={() => this.fitHeight()}><ls-icon name=\"fit-height\" /></button>\n        <button onClick={() => { this.editor.pagePrev() }}><ls-icon name=\"arrow-left\" /></button>\n        <button onClick={() => { this.editor.pageNext() }}><ls-icon name=\"arrow-right\" /></button>\n\n\n        <button onClick={() => this.setZoom(this.editor.zoom * 0.8)}><ls-icon name=\"zoom-out\" /></button>\n        <div><input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} /></div>\n        <button onClick={() => this.setZoom(this.editor.zoom / 0.8)}><ls-icon name=\"zoom-in\" /></button>\n\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ls-statusbar.js","sourceRoot":"","sources":["../../../src/components/ls-statusbar/ls-statusbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-statusbar',\n  styleUrl: 'ls-statusbar.css',\n  shadow: true,\n})\nexport class LsStatusbar {\n  @Element() component: HTMLElement;\n  /**\n   * The zoom or scale level 100 === 100%.\n   * {number}\n   */\n  @Prop({ mutable: true }) zoom: number;\n\n  /**\n   * The parent editor control.\n   * {LsDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\n\n  setZoom(value: number) {\n    this.editor.setZoom(value);\n    this.zoom = value;\n  }\n\n  handleZoomInput() {\n    const zoomInput = this.component.shadowRoot.getElementById('zoomRange') as HTMLInputElement;\n    console.log(zoomInput.value);\n    debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);\n  }\n\n  fitWidth() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');\n    const scale: number = frame.clientWidth / this.editor.pageDimensions[0].width;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  fitHeight() {\n    const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');\n    const scale: number = frame.clientHeight / this.editor.pageDimensions[0].height;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  componentDidLoad() {\n    this.zoom = this.editor.zoom;\n  }\n\n  \n\n  render() {\n    console.log('editor',this.editor);\n    return (\n      <Host>\n        {/* <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n        <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button> */}\n        <div class={\"status-bar-section\"}>\n\n        <button onClick={() => this.setZoom(this.editor.zoom * 0.8)}>\n          <ls-icon name=\"zoom-out\" />\n        </button>\n        <div>\n          <input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} />\n        </div>\n        <button onClick={() => this.setZoom(this.editor.zoom / 0.8)}>\n          <ls-icon name=\"zoom-in\" />\n        </button>\n        </div>\n         <div class={\"status-bar-section\"}>\n        <button onClick={() => this.fitWidth()}>\n          <ls-icon name=\"fit-width\" />\n        </button>\n        <button onClick={() => this.fitHeight()}>\n          <ls-icon name=\"fit-height\" />\n        </button>\n        </div>\n         <div class={\"status-bar-section\"}>\n        <button\n          onClick={() => {\n            this.editor.pagePrev();\n          }}\n        >\n          <ls-icon name=\"chevron-left\" />\n        </button>\n        <p>1 / 2</p>\n        <button\n          onClick={() => {\n            this.editor.pageNext();\n          }}\n        >\n          <ls-icon name=\"chevron-right\" />\n        </button>\n        </div>\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-toggle/ls-toggle.css

@@ -0,0 +1,69 @@
+:host {
+  display: block;
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 2.75rem;
+  height: 1.5rem;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--gray-20, #EDEFF2);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+  left: 0.125rem;
+  bottom: 0.125rem;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: var(--primary-60, #4456F6);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px var(--primary-60, #4456F6);
+  outline: 4px solid var(--primary-20, #E3E6FF);
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(1.25rem);
+  -ms-transform: translateX(1.25rem);
+  transform: translateX(1.25rem);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+

package/dist/collection/components/ls-toggle/ls-toggle.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class LsToggle {
+    render() {
+        return (h(Host, { key: '1a3e104280a39b83b82c0454cebad829a38353a7' }, h("label", { key: '7a9ee630ff623aa25d1364409aa77ddb2b1abec9', class: "switch" }, h("input", { key: '78a3c7e6199561d2b446ee01d4f483f064985c06', type: "checkbox" }), h("span", { key: '0f8f18a6e0dc1621d2d6eb0db18accb1ac3617ce', class: "slider round" })), h("slot", { key: 'cc23067cdab76afb4788700db8076c2a6314fb3b' })));
+    }
+    static get is() { return "ls-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-toggle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-toggle.css"]
+        };
+    }
+}
+//# sourceMappingURL=ls-toggle.js.map

package/dist/collection/components/ls-toggle/ls-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-toggle.js","sourceRoot":"","sources":["../../../src/components/ls-toggle/ls-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAC,QAAQ;gBACnB,8DAAO,IAAI,EAAC,UAAU,GAAI;gBAC1B,6DAAM,KAAK,EAAC,cAAc,GAAQ,CAC5B;YACR,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-toggle',\n  styleUrl: 'ls-toggle.css',\n  shadow: true,\n})\nexport class LsToggle {\n  render() {\n    return (\n      <Host>\n        <label class=\"switch\">\n          <input type=\"checkbox\"  />\n          <span class=\"slider round\"></span>\n        </label>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-toolbar/ls-toolbar.css

@@ -1,13 +1,303 @@
 :host {
+  position: relative;
   display: flex;
-  flex-direction: row;
-  height: 32px;
   width: 100%;
-  background-color: rgb(205, 205, 205);
+  align-items: center;
+  justify-content: center;
 }
 
 .rowbox {
+  position: absolute;
+  top: 1rem;
   display: flex;
-  flex-direction: row;
-    vertical-align: middle;
-}
+  padding: 0.5rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  width: fit-content;
+  border-radius: 1rem;
+  border: 1px solid var(--gray-20, #edeff2);
+  background: var(--white, #fff);
+  margin-bottom: 1rem;
+  z-index: 200;
+}
+
+/* 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: 36px;
+}
+
+.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);
+}
+