@verdocs/web-sdk 4.0.6 → 4.0.7

package/dist/cjs/verdocs-button-panel.cjs.entry.js

@@ -70,10 +70,10 @@ const VerdocsButtonPanel = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ae010f54975177c5c9afcd285c11aa66d044dd04' }, index.h("div", { key: '4146c43e682c7d50e1ceda20ebc0d2083dbe6f12', class: "icon", innerHTML: this.icon, onClick: (e) => {
+        return (index.h(index.Host, { key: '875a734696925dd22625880b694e32c4845e1254' }, index.h("div", { key: 'cc83aef76b34b3e9031160451f9643168d41cf3b', class: "icon", innerHTML: this.icon, onClick: (e) => {
                 e.stopPropagation();
                 return this.toggle();
-            }, ref: el => (this.iconEl = el) }), index.h("div", { key: '20f21d910d41b23d1608b04d90473f6f7950f5b4', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, index.h("div", { key: 'dc5070f0bfd13bce172a8e0e8cbbcb3520ca33dc', "data-popper-arrow": "true", class: "arrow" }), index.h("slot", { key: 'b9ee2f03c5bdf1f672dd5845a757e09cde1c18dc' }))));
+            }, ref: el => (this.iconEl = el) }), index.h("div", { key: '136375bb517b9d86327c6fa63b115f3f496df7a4', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, index.h("div", { key: '065c60cf39be8a608fbc5e2199b09cb55d8a551b', "data-popper-arrow": "true", class: "arrow" }), index.h("slot", { key: '85af4ff2a549a5d062fff08bf17d1c6c24c439e5' }))));
     }
 };
 VerdocsButtonPanel.style = VerdocsButtonPanelStyle0;

package/dist/cjs/verdocs-button_3.cjs.entry.js

@@ -21,7 +21,7 @@ const VerdocsButton = class {
         this.disabled = false;
     }
     render() {
-        return (index.h("button", { key: 'd796a22dcd2b135f3430d26a4cb4e8caf9109c9b', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? index.h("span", { class: "icon start", innerHTML: this.startIcon }) : null, index.h("span", { key: 'c1de665728ed0e4bf739e4f5b30efc67cb81cfbf', class: "button-label" }, this.label), this.endIcon ? index.h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+        return (index.h("button", { key: '813ea229dd512708d1b1c0fe87cf7462cb2276b7', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? index.h("span", { class: "icon start", innerHTML: this.startIcon }) : null, index.h("span", { key: 'd1ca3189f5513bbe13eeda50aa0dc27a03f67480', class: "button-label" }, this.label), this.endIcon ? index.h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
     }
 };
 VerdocsButton.style = VerdocsButtonStyle0;

package/dist/cjs/verdocs-checkbox_5.cjs.entry.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cfdfab36.js');
-const uuidv4 = require('uuid-browser');
 const jsSdk = require('@verdocs/js-sdk');
 const TemplateFieldStore = require('./TemplateFieldStore-6a79aae7.js');
 const TemplateRoleStore = require('./TemplateRoleStore-06db6e56.js');
@@ -12,10 +11,6 @@ const errors = require('./errors-017fb835.js');
 require('./index-3e4c5891.js');
 require('./index-a5472099.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-const uuidv4__default = /*#__PURE__*/_interopDefaultLegacy(uuidv4);
-
 const verdocsCheckboxCss = "@charset \"UTF-8\";@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-checkbox{line-height:18px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-checkbox label>input[type=checkbox]{display:none}verdocs-checkbox label>input[type=checkbox]+*::before{content:\"\";width:20px;height:20px;-ms-flex-negative:0;flex-shrink:0;margin-right:8px;line-height:20px;border-radius:2px;border-style:solid;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-checkbox.dark label>input[type=checkbox]+*::before{border-color:#ffffff}verdocs-checkbox.dark label>input[type=checkbox]:checked+*::before{background:#55bc81;border-color:#55bc81}";
 const VerdocsCheckboxStyle0 = verdocsCheckboxCss;
 
@@ -144,6 +139,20 @@ const VerdocsTemplateFieldPropertiesStyle0 = verdocsTemplateFieldPropertiesCss;
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
 const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
+// Credit: https://stackoverflow.com/a/78196510/1812436
+// NOTE: This is NOT safe or cryptographically strong, so it's not part of our core SDK's or Utils modules.
+// It should never be used anywhere a real GUID is required. But we don't need one here, we just need a
+// "GUID-like" value for one step of a field update operation (adding items to lists). There are no security
+// implications in how we use IDs for list items. They only need to be GUID-like for historical reasons that
+// we may change shortly anyway.
+function generateWeakGuid() {
+    const s4 = () => {
+        return Math.floor((1 + Math.random()) * 0x10000)
+            .toString(16)
+            .substring(1);
+    };
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+}
 const VerdocsTemplateFieldProperties = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -295,14 +304,14 @@ const VerdocsTemplateFieldProperties = class {
         };
         this.options.push(this.type === 'radio_button_group'
             ? {
-                id: uuidv4__default['default'](),
+                id: generateWeakGuid(),
                 value: `Option ${this.options.length + 1}`,
                 selected: false,
                 x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
                 y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
             }
             : {
-                id: uuidv4__default['default'](),
+                id: generateWeakGuid(),
                 value: `Option ${this.options.length + 1}`,
                 checked: false,
                 x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,

package/dist/cjs/verdocs-dropdown.cjs.entry.js

@@ -91,7 +91,7 @@ const VerdocsDropdown = class {
         (_a = document.getElementById(MENU_ID)) === null || _a === void 0 ? void 0 : _a.remove();
     }
     render() {
-        return (index.h(index.Host, { key: 'ba41da3a28f1fb5b36c6918967fad5297cedf8dd' }, index.h("button", { key: '8f10c96d7e108f79115c8b4b309c7e02ab5f37f6', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
+        return (index.h(index.Host, { key: '068386cdca529f310e7914d475739ca9a574d02d' }, index.h("button", { key: '557fe893e3123fdff6251992c14a3a803451fd30', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
             // onBlur={() => this.hide()}
             ref: el => (this.dropdownButton = el) })));
     }

package/dist/cjs/verdocs-file-chooser_2.cjs.entry.js

@@ -31,7 +31,7 @@ const VerdocsFileChooser = class {
     }
     render() {
         const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';
-        return (index.h(index.Host, { key: 'f8febf3e2ed17a5997e9e97aad97a83ecd5a0bb2' }, index.h("input", { key: 'b151b6e4a19521ecb95b40a7b414c6ffd3e7c74b', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), index.h("div", { key: '9aa5d9b06f54f4479afb9276702632c695d24d0f', class: "upload-box" }, index.h("div", { key: '769adcb7a66ae0357e581909978fc18e5cca75ab', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), index.h("div", { key: 'd50342ec030cf44a608b7e13e480015c63822ea7', class: "or-prefer" }, this.file ? Icons.unicodeNBSP : 'Or, if you prefer...'), index.h("verdocs-button", { key: 'd6a883649258392cb922a4b0a4901e526017bf5f', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
+        return (index.h(index.Host, { key: '870f83d51356099942aeb7f50680bff38b946e74' }, index.h("input", { key: 'a4177207b2d87dd1d7e26093b93e36858a296f65', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), index.h("div", { key: '57e6c23406d1a12bc7b426fe76469c83925692ed', class: "upload-box" }, index.h("div", { key: '6b05c0bc019af781b632b91761e96b48a7e99623', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), index.h("div", { key: 'b1ab95cb7d5a19c2d5c3e3a48c073a954bbed454', class: "or-prefer" }, this.file ? Icons.unicodeNBSP : 'Or, if you prefer...'), index.h("verdocs-button", { key: 'bec299eef4e98464c0cd76180c8b2af875ee6243', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
     }
 };
 VerdocsFileChooser.style = VerdocsFileChooserStyle0;

package/dist/collection/components/controls/verdocs-button/verdocs-button.js

@@ -1,23 +1,4 @@
 import { h } from "@stencil/core";
-/**
- * Display a simple button.
- *
- * Three variants are supported. `standard` and `outline` buttons look like traditional form buttons and are ideal candidates for 'Ok' and
- * 'Cancel' options in most cases. `text` buttons are intended to be used inline in content blocks or for more subtle button options.
- * (Auth uses text buttons for the Forgot Password and Sign Up options.)
- *
- * Four sizes are also supported. Most use cases will call for the `normal` size, but a `small` size is ideal for more subtle controls, such
- * as pagination or other secondary functions. `medium` buttons are slightly larger to provide balance in forms where other items are also
- * bigger, and `large` buttons are for cases where the page has mostly white-space and the buttons need to fill more space.
- *
- * Icons may be placed either before ("start") or after ("end") the button label. Icons should be SVG objects passed as strings and will
- * be rendered as HTML inside the button label area. It is important that the root <SVG> tag contains a default `fill="#ffffff"` setting
- * for the base color, and that child elements below it do not. This allows the button color to carry into the icon properly.
- *
- * ```html
- * <verdocs-button label="OK" onClick={() => (console.log('OK clicked'))} />
- * ```
- */
 export class VerdocsButton {
     constructor() {
         this.label = undefined;
@@ -29,7 +10,7 @@ export class VerdocsButton {
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: 'd796a22dcd2b135f3430d26a4cb4e8caf9109c9b', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: 'c1de665728ed0e4bf739e4f5b30efc67cb81cfbf', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+        return (h("button", { key: '813ea229dd512708d1b1c0fe87cf7462cb2276b7', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: 'd1ca3189f5513bbe13eeda50aa0dc27a03f67480', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
     }
     static get is() { return "verdocs-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-button-panel/verdocs-button-panel.js

@@ -1,15 +1,5 @@
 import { createPopper } from "@popperjs/core";
 import { h, Host } from "@stencil/core";
-/**
- * Displays a clickable icon suitable for display in a toolbar. When clicked, a customizable drop-down panel will be
- * displayed.
- *
- * ```html
- * <verdocs-button-panel icon="<svg.../>">
- *   <div class="content">...</div>
- * </verdocs-button-panel>
- * ```
- */
 export class VerdocsButtonPanel {
     constructor() {
         // Not marked as @State because it's not the thing that controls our rendering
@@ -71,10 +61,10 @@ export class VerdocsButtonPanel {
         }
     }
     render() {
-        return (h(Host, { key: 'ae010f54975177c5c9afcd285c11aa66d044dd04' }, h("div", { key: '4146c43e682c7d50e1ceda20ebc0d2083dbe6f12', class: "icon", innerHTML: this.icon, onClick: (e) => {
+        return (h(Host, { key: '875a734696925dd22625880b694e32c4845e1254' }, h("div", { key: 'cc83aef76b34b3e9031160451f9643168d41cf3b', class: "icon", innerHTML: this.icon, onClick: (e) => {
                 e.stopPropagation();
                 return this.toggle();
-            }, ref: el => (this.iconEl = el) }), h("div", { key: '20f21d910d41b23d1608b04d90473f6f7950f5b4', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: 'dc5070f0bfd13bce172a8e0e8cbbcb3520ca33dc', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: 'b9ee2f03c5bdf1f672dd5845a757e09cde1c18dc' }))));
+            }, ref: el => (this.iconEl = el) }), h("div", { key: '136375bb517b9d86327c6fa63b115f3f496df7a4', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '065c60cf39be8a608fbc5e2199b09cb55d8a551b', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: '85af4ff2a549a5d062fff08bf17d1c6c24c439e5' }))));
     }
     static get is() { return "verdocs-button-panel"; }
     static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.js

@@ -18,22 +18,6 @@ function debounce(func, wait, immediate) {
             func.apply(context, args);
     };
 }
-/**
- * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden
- * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label.
- *
- * ```html
- * <verdocs-dropdown
- *   options={[
- *     {label: 'Option 1', disabled: true},
- *     {label: 'Option 2', id: '2'}
- *     {label: ''}
- *     {label: 'Option 3', id: '2'}
- *    ]}
- *   label="OK" onClick={() => (console.log('OK clicked'))}
- * />
- * ```
- */
 export class VerdocsDropdown {
     constructor() {
         this.options = [];
@@ -98,7 +82,7 @@ export class VerdocsDropdown {
         (_a = document.getElementById(MENU_ID)) === null || _a === void 0 ? void 0 : _a.remove();
     }
     render() {
-        return (h(Host, { key: 'ba41da3a28f1fb5b36c6918967fad5297cedf8dd' }, h("button", { key: '8f10c96d7e108f79115c8b4b309c7e02ab5f37f6', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
+        return (h(Host, { key: '068386cdca529f310e7914d475739ca9a574d02d' }, h("button", { key: '557fe893e3123fdff6251992c14a3a803451fd30', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
             // onBlur={() => this.hide()}
             ref: el => (this.dropdownButton = el) })));
     }

package/dist/collection/components/controls/verdocs-file-chooser/verdocs-file-chooser.js

@@ -1,10 +1,6 @@
 import { VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host } from "@stencil/core";
 import { unicodeNBSP } from "../../../utils/Icons";
-/**
- * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should
- * provide the actual upload functionality.
- */
 export class VerdocsFileChooser {
     constructor() {
         this.endpoint = VerdocsEndpoint.getDefault();
@@ -25,7 +21,7 @@ export class VerdocsFileChooser {
     }
     render() {
         const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';
-        return (h(Host, { key: 'f8febf3e2ed17a5997e9e97aad97a83ecd5a0bb2' }, h("input", { key: 'b151b6e4a19521ecb95b40a7b414c6ffd3e7c74b', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: '9aa5d9b06f54f4479afb9276702632c695d24d0f', class: "upload-box" }, h("div", { key: '769adcb7a66ae0357e581909978fc18e5cca75ab', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: 'd50342ec030cf44a608b7e13e480015c63822ea7', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: 'd6a883649258392cb922a4b0a4901e526017bf5f', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
+        return (h(Host, { key: '870f83d51356099942aeb7f50680bff38b946e74' }, h("input", { key: 'a4177207b2d87dd1d7e26093b93e36858a296f65', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: '57e6c23406d1a12bc7b426fe76469c83925692ed', class: "upload-box" }, h("div", { key: '6b05c0bc019af781b632b91761e96b48a7e99623', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: 'b1ab95cb7d5a19c2d5c3e3a48c073a954bbed454', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: 'bec299eef4e98464c0cd76180c8b2af875ee6243', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
     }
     static get is() { return "verdocs-file-chooser"; }
     static get originalStyleUrls() {

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -1,4 +1,3 @@
-import uuidv4 from "uuid-browser";
 import { deleteField, updateField, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host } from "@stencil/core";
 import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
@@ -8,6 +7,20 @@ import { SDKError } from "../../../utils/errors";
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
 const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
+// Credit: https://stackoverflow.com/a/78196510/1812436
+// NOTE: This is NOT safe or cryptographically strong, so it's not part of our core SDK's or Utils modules.
+// It should never be used anywhere a real GUID is required. But we don't need one here, we just need a
+// "GUID-like" value for one step of a field update operation (adding items to lists). There are no security
+// implications in how we use IDs for list items. They only need to be GUID-like for historical reasons that
+// we may change shortly anyway.
+function generateWeakGuid() {
+    const s4 = () => {
+        return Math.floor((1 + Math.random()) * 0x10000)
+            .toString(16)
+            .substring(1);
+    };
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+}
 /**
  * Displays an edit form that allows the user to adjust a field's settings.
  */
@@ -157,14 +170,14 @@ export class VerdocsTemplateFieldProperties {
         };
         this.options.push(this.type === 'radio_button_group'
             ? {
-                id: uuidv4(),
+                id: generateWeakGuid(),
                 value: `Option ${this.options.length + 1}`,
                 selected: false,
                 x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
                 y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
             }
             : {
-                id: uuidv4(),
+                id: generateWeakGuid(),
                 value: `Option ${this.options.length + 1}`,
                 checked: false,
                 x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,

package/dist/components/verdocs-button-panel.js

@@ -67,10 +67,10 @@ const VerdocsButtonPanel$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsButto
         }
     }
     render() {
-        return (h(Host, { key: 'ae010f54975177c5c9afcd285c11aa66d044dd04' }, h("div", { key: '4146c43e682c7d50e1ceda20ebc0d2083dbe6f12', class: "icon", innerHTML: this.icon, onClick: (e) => {
+        return (h(Host, { key: '875a734696925dd22625880b694e32c4845e1254' }, h("div", { key: 'cc83aef76b34b3e9031160451f9643168d41cf3b', class: "icon", innerHTML: this.icon, onClick: (e) => {
                 e.stopPropagation();
                 return this.toggle();
-            }, ref: el => (this.iconEl = el) }), h("div", { key: '20f21d910d41b23d1608b04d90473f6f7950f5b4', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: 'dc5070f0bfd13bce172a8e0e8cbbcb3520ca33dc', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: 'b9ee2f03c5bdf1f672dd5845a757e09cde1c18dc' }))));
+            }, ref: el => (this.iconEl = el) }), h("div", { key: '136375bb517b9d86327c6fa63b115f3f496df7a4', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '065c60cf39be8a608fbc5e2199b09cb55d8a551b', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: '85af4ff2a549a5d062fff08bf17d1c6c24c439e5' }))));
     }
     static get style() { return VerdocsButtonPanelStyle0; }
 }, [4, "verdocs-button-panel", {

package/dist/components/verdocs-button2.js

@@ -16,7 +16,7 @@ const VerdocsButton = /*@__PURE__*/ proxyCustomElement(class VerdocsButton exten
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: 'd796a22dcd2b135f3430d26a4cb4e8caf9109c9b', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: 'c1de665728ed0e4bf739e4f5b30efc67cb81cfbf', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+        return (h("button", { key: '813ea229dd512708d1b1c0fe87cf7462cb2276b7', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: 'd1ca3189f5513bbe13eeda50aa0dc27a03f67480', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
     }
     static get style() { return VerdocsButtonStyle0; }
 }, [0, "verdocs-button", {

package/dist/components/verdocs-dropdown2.js

@@ -88,7 +88,7 @@ const VerdocsDropdown = /*@__PURE__*/ proxyCustomElement(class VerdocsDropdown e
         (_a = document.getElementById(MENU_ID)) === null || _a === void 0 ? void 0 : _a.remove();
     }
     render() {
-        return (h(Host, { key: 'ba41da3a28f1fb5b36c6918967fad5297cedf8dd' }, h("button", { key: '8f10c96d7e108f79115c8b4b309c7e02ab5f37f6', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
+        return (h(Host, { key: '068386cdca529f310e7914d475739ca9a574d02d' }, h("button", { key: '557fe893e3123fdff6251992c14a3a803451fd30', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
             // onBlur={() => this.hide()}
             ref: el => (this.dropdownButton = el) })));
     }

package/dist/components/verdocs-file-chooser2.js

@@ -29,7 +29,7 @@ const VerdocsFileChooser = /*@__PURE__*/ proxyCustomElement(class VerdocsFileCho
     }
     render() {
         const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';
-        return (h(Host, { key: 'f8febf3e2ed17a5997e9e97aad97a83ecd5a0bb2' }, h("input", { key: 'b151b6e4a19521ecb95b40a7b414c6ffd3e7c74b', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: '9aa5d9b06f54f4479afb9276702632c695d24d0f', class: "upload-box" }, h("div", { key: '769adcb7a66ae0357e581909978fc18e5cca75ab', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: 'd50342ec030cf44a608b7e13e480015c63822ea7', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: 'd6a883649258392cb922a4b0a4901e526017bf5f', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
+        return (h(Host, { key: '870f83d51356099942aeb7f50680bff38b946e74' }, h("input", { key: 'a4177207b2d87dd1d7e26093b93e36858a296f65', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: '57e6c23406d1a12bc7b426fe76469c83925692ed', class: "upload-box" }, h("div", { key: '6b05c0bc019af781b632b91761e96b48a7e99623', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: 'b1ab95cb7d5a19c2d5c3e3a48c073a954bbed454', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: 'bec299eef4e98464c0cd76180c8b2af875ee6243', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
     }
     static get style() { return VerdocsFileChooserStyle0; }
 }, [0, "verdocs-file-chooser", {

package/dist/components/verdocs-template-field-properties2.js

@@ -1,5 +1,4 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import uuidv4 from 'uuid-browser';
 import { VerdocsEndpoint, updateField, deleteField } from '@verdocs/js-sdk';
 import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore.js';
 import { g as getTemplateRoleStore } from './TemplateRoleStore.js';
@@ -18,6 +17,20 @@ const VerdocsTemplateFieldPropertiesStyle0 = verdocsTemplateFieldPropertiesCss;
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
 const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
+// Credit: https://stackoverflow.com/a/78196510/1812436
+// NOTE: This is NOT safe or cryptographically strong, so it's not part of our core SDK's or Utils modules.
+// It should never be used anywhere a real GUID is required. But we don't need one here, we just need a
+// "GUID-like" value for one step of a field update operation (adding items to lists). There are no security
+// implications in how we use IDs for list items. They only need to be GUID-like for historical reasons that
+// we may change shortly anyway.
+function generateWeakGuid() {
+    const s4 = () => {
+        return Math.floor((1 + Math.random()) * 0x10000)
+            .toString(16)
+            .substring(1);
+    };
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+}
 const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class VerdocsTemplateFieldProperties extends HTMLElement {
     constructor() {
         super();
@@ -170,14 +183,14 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class Ve
         };
         this.options.push(this.type === 'radio_button_group'
             ? {
-                id: uuidv4(),
+                id: generateWeakGuid(),
                 value: `Option ${this.options.length + 1}`,
                 selected: false,
                 x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
                 y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
             }
             : {
-                id: uuidv4(),
+                id: generateWeakGuid(),
                 value: `Option ${this.options.length + 1}`,
                 checked: false,
                 x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-06-18T17:19:07",
+  "timestamp": "2024-06-19T00:05:44",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.18.3",
@@ -781,7 +781,7 @@
       "filePath": "src/components/controls/verdocs-button/verdocs-button.tsx",
       "encapsulation": "none",
       "tag": "verdocs-button",
-      "docs": "Display a simple button.\n\nThree variants are supported. `standard` and `outline` buttons look like traditional form buttons and are ideal candidates for 'Ok' and\n'Cancel' options in most cases. `text` buttons are intended to be used inline in content blocks or for more subtle button options.\n(Auth uses text buttons for the Forgot Password and Sign Up options.)\n\nFour sizes are also supported. Most use cases will call for the `normal` size, but a `small` size is ideal for more subtle controls, such\nas pagination or other secondary functions. `medium` buttons are slightly larger to provide balance in forms where other items are also\nbigger, and `large` buttons are for cases where the page has mostly white-space and the buttons need to fill more space.\n\nIcons may be placed either before (\"start\") or after (\"end\") the button label. Icons should be SVG objects passed as strings and will\nbe rendered as HTML inside the button label area. It is important that the root <SVG> tag contains a default `fill=\"#ffffff\"` setting\nfor the base color, and that child elements below it do not. This allows the button color to carry into the icon properly.\n\n```html\n<verdocs-button label=\"OK\" onClick={() => (console.log('OK clicked'))} />\n```",
+      "docs": "",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -1098,7 +1098,7 @@
       "filePath": "src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx",
       "encapsulation": "none",
       "tag": "verdocs-button-panel",
-      "docs": "Displays a clickable icon suitable for display in a toolbar. When clicked, a customizable drop-down panel will be\ndisplayed.\n\n```html\n<verdocs-button-panel icon=\"<svg.../>\">\n  <div class=\"content\">...</div>\n</verdocs-button-panel>\n```",
+      "docs": "",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -1690,7 +1690,7 @@
       "filePath": "src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx",
       "encapsulation": "none",
       "tag": "verdocs-dropdown",
-      "docs": "Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\nwhen the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label.\n\n```html\n<verdocs-dropdown\n  options={[\n    {label: 'Option 1', disabled: true},\n    {label: 'Option 2', id: '2'}\n    {label: ''}\n    {label: 'Option 3', id: '2'}\n   ]}\n  label=\"OK\" onClick={() => (console.log('OK clicked'))}\n/>\n```",
+      "docs": "",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -7287,7 +7287,7 @@
       "filePath": "src/components/controls/verdocs-file-chooser/verdocs-file-chooser.tsx",
       "encapsulation": "none",
       "tag": "verdocs-file-chooser",
-      "docs": "Displays a file picker to upload an attachment. This component is just the picker - the host application or component should\nprovide the actual upload functionality.",
+      "docs": "",
       "docsTags": [],
       "usage": {},
       "props": [

package/dist/esm/verdocs-button-panel.entry.js

@@ -66,10 +66,10 @@ const VerdocsButtonPanel = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ae010f54975177c5c9afcd285c11aa66d044dd04' }, h("div", { key: '4146c43e682c7d50e1ceda20ebc0d2083dbe6f12', class: "icon", innerHTML: this.icon, onClick: (e) => {
+        return (h(Host, { key: '875a734696925dd22625880b694e32c4845e1254' }, h("div", { key: 'cc83aef76b34b3e9031160451f9643168d41cf3b', class: "icon", innerHTML: this.icon, onClick: (e) => {
                 e.stopPropagation();
                 return this.toggle();
-            }, ref: el => (this.iconEl = el) }), h("div", { key: '20f21d910d41b23d1608b04d90473f6f7950f5b4', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: 'dc5070f0bfd13bce172a8e0e8cbbcb3520ca33dc', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: 'b9ee2f03c5bdf1f672dd5845a757e09cde1c18dc' }))));
+            }, ref: el => (this.iconEl = el) }), h("div", { key: '136375bb517b9d86327c6fa63b115f3f496df7a4', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '065c60cf39be8a608fbc5e2199b09cb55d8a551b', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: '85af4ff2a549a5d062fff08bf17d1c6c24c439e5' }))));
     }
 };
 VerdocsButtonPanel.style = VerdocsButtonPanelStyle0;

package/dist/esm/verdocs-button_3.entry.js

@@ -17,7 +17,7 @@ const VerdocsButton = class {
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: 'd796a22dcd2b135f3430d26a4cb4e8caf9109c9b', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: 'c1de665728ed0e4bf739e4f5b30efc67cb81cfbf', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+        return (h("button", { key: '813ea229dd512708d1b1c0fe87cf7462cb2276b7', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: 'd1ca3189f5513bbe13eeda50aa0dc27a03f67480', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
     }
 };
 VerdocsButton.style = VerdocsButtonStyle0;

package/dist/esm/verdocs-checkbox_5.entry.js

@@ -1,5 +1,4 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-b89cf6a4.js';
-import uuidv4 from 'uuid-browser';
 import { VerdocsEndpoint, updateField, deleteField } from '@verdocs/js-sdk';
 import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-d7516adf.js';
 import { g as getTemplateRoleStore } from './TemplateRoleStore-ddc3b96f.js';
@@ -136,6 +135,20 @@ const VerdocsTemplateFieldPropertiesStyle0 = verdocsTemplateFieldPropertiesCss;
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
 const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
+// Credit: https://stackoverflow.com/a/78196510/1812436
+// NOTE: This is NOT safe or cryptographically strong, so it's not part of our core SDK's or Utils modules.
+// It should never be used anywhere a real GUID is required. But we don't need one here, we just need a
+// "GUID-like" value for one step of a field update operation (adding items to lists). There are no security
+// implications in how we use IDs for list items. They only need to be GUID-like for historical reasons that
+// we may change shortly anyway.
+function generateWeakGuid() {
+    const s4 = () => {
+        return Math.floor((1 + Math.random()) * 0x10000)
+            .toString(16)
+            .substring(1);
+    };
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+}
 const VerdocsTemplateFieldProperties = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -287,14 +300,14 @@ const VerdocsTemplateFieldProperties = class {
         };
         this.options.push(this.type === 'radio_button_group'
             ? {
-                id: uuidv4(),
+                id: generateWeakGuid(),
                 value: `Option ${this.options.length + 1}`,
                 selected: false,
                 x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
                 y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
             }
             : {
-                id: uuidv4(),
+                id: generateWeakGuid(),
                 value: `Option ${this.options.length + 1}`,
                 checked: false,
                 x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,

package/dist/esm/verdocs-dropdown.entry.js

@@ -87,7 +87,7 @@ const VerdocsDropdown = class {
         (_a = document.getElementById(MENU_ID)) === null || _a === void 0 ? void 0 : _a.remove();
     }
     render() {
-        return (h(Host, { key: 'ba41da3a28f1fb5b36c6918967fad5297cedf8dd' }, h("button", { key: '8f10c96d7e108f79115c8b4b309c7e02ab5f37f6', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
+        return (h(Host, { key: '068386cdca529f310e7914d475739ca9a574d02d' }, h("button", { key: '557fe893e3123fdff6251992c14a3a803451fd30', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
             // onBlur={() => this.hide()}
             ref: el => (this.dropdownButton = el) })));
     }

package/dist/esm/verdocs-file-chooser_2.entry.js

@@ -27,7 +27,7 @@ const VerdocsFileChooser = class {
     }
     render() {
         const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';
-        return (h(Host, { key: 'f8febf3e2ed17a5997e9e97aad97a83ecd5a0bb2' }, h("input", { key: 'b151b6e4a19521ecb95b40a7b414c6ffd3e7c74b', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: '9aa5d9b06f54f4479afb9276702632c695d24d0f', class: "upload-box" }, h("div", { key: '769adcb7a66ae0357e581909978fc18e5cca75ab', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: 'd50342ec030cf44a608b7e13e480015c63822ea7', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: 'd6a883649258392cb922a4b0a4901e526017bf5f', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
+        return (h(Host, { key: '870f83d51356099942aeb7f50680bff38b946e74' }, h("input", { key: 'a4177207b2d87dd1d7e26093b93e36858a296f65', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: '57e6c23406d1a12bc7b426fe76469c83925692ed', class: "upload-box" }, h("div", { key: '6b05c0bc019af781b632b91761e96b48a7e99623', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: 'b1ab95cb7d5a19c2d5c3e3a48c073a954bbed454', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: 'bec299eef4e98464c0cd76180c8b2af875ee6243', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
     }
 };
 VerdocsFileChooser.style = VerdocsFileChooserStyle0;

package/dist/esm-es5/verdocs-button-panel.entry.js

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,o){function r(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,i){function a(t){try{s(o.next(t))}catch(t){i(t)}}function c(t){try{s(o["throw"](t))}catch(t){i(t)}}function s(t){t.done?n(t.value):r(t.value).then(a,c)}s((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},o,r,i,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(t){return function(e){return s([t,e])}}function s(c){if(o)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(n=0)),n)try{if(o=1,r&&(i=c[0]&2?r["return"]:c[0]?r["throw"]||((i=r["return"])&&i.call(r),0):r.next)&&!(i=i.call(r,c[1])).done)return i;if(r=0,i)c=[c[0]&2,i.value];switch(c[0]){case 0:case 1:i=c;break;case 4:n.label++;return{value:c[1],done:false};case 5:n.label++;r=c[1];c=[0];continue;case 7:c=n.ops.pop();n.trys.pop();continue;default:if(!(i=n.trys,i=i.length>0&&i[i.length-1])&&(c[0]===6||c[0]===2)){n=0;continue}if(c[0]===3&&(!i||c[1]>i[0]&&c[1]<i[3])){n.label=c[1];break}if(c[0]===6&&n.label<i[1]){n.label=i[1];i=c;break}if(i&&n.label<i[2]){n.label=i[2];n.ops.push(c);break}if(i[2])n.ops.pop();n.trys.pop();continue}c=e.call(t,n)}catch(t){c=[6,t];r=0}finally{o=i=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{r as registerInstance,h,H as Host}from"./index-b89cf6a4.js";import{c as createPopper}from"./popper-0fbeff6d.js";var verdocsButtonPanelCss='@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-button-panel{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:"";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{font-size:16px;font-weight:bold;margin:0 0 16px 0;color:#092c4c;border-bottom:1px solid #cccccc}';var VerdocsButtonPanelStyle0=verdocsButtonPanelCss;var VerdocsButtonPanel=function(){function t(t){registerInstance(this,t);this.showing=false;this.icon=""}t.prototype.componentDidRender=function(){document.body.appendChild(this.panelEl);if(this.popperInstance){this.popperInstance.destroy()}this.popperInstance=createPopper(this.iconEl,this.panelEl,{})};t.prototype.disconnectedCallback=function(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}if(this.panelEl){this.panelEl.remove()}};t.prototype.showPanel=function(){return __awaiter(this,void 0,void 0,(function(){var t,e;var n=this;return __generator(this,(function(o){(t=this.panelEl)===null||t===void 0?void 0:t.setAttribute("data-show","");(e=this.popperInstance)===null||e===void 0?void 0:e.update().catch((function(){}));this.showing=true;this.hiderEl=document.createElement("div");this.hiderEl.id="verdocs-button-panel-hider";this.hiderEl.style.zIndex="100";this.hiderEl.style.position="absolute";this.hiderEl.style.top="0px";this.hiderEl.style.left="0px";this.hiderEl.style.right="0px";this.hiderEl.style.bottom="0px";this.hiderEl.onclick=function(t){t.stopPropagation();n.toggle()};document.body.appendChild(this.hiderEl);return[2]}))}))};t.prototype.hidePanel=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){Array.from(document.getElementsByClassName("verdocs-button-panel-content")).forEach((function(t){t.removeAttribute("data-show")}));(t=document.getElementById("verdocs-button-panel-hider"))===null||t===void 0?void 0:t.remove();this.showing=false;return[2]}))}))};t.prototype.toggle=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!this.showing)return[3,2];return[4,this.hidePanel()];case 1:t.sent();return[3,4];case 2:return[4,this.showPanel()];case 3:t.sent();t.label=4;case 4:return[2]}}))}))};t.prototype.render=function(){var t=this;return h(Host,{key:"ae010f54975177c5c9afcd285c11aa66d044dd04"},h("div",{key:"4146c43e682c7d50e1ceda20ebc0d2083dbe6f12",class:"icon",innerHTML:this.icon,onClick:function(e){e.stopPropagation();return t.toggle()},ref:function(e){return t.iconEl=e}}),h("div",{key:"20f21d910d41b23d1608b04d90473f6f7950f5b4",role:"tooltip",class:"verdocs-button-panel-content","data-popper-placement":"bottom",ref:function(e){return t.panelEl=e}},h("div",{key:"dc5070f0bfd13bce172a8e0e8cbbcb3520ca33dc","data-popper-arrow":"true",class:"arrow"}),h("slot",{key:"b9ee2f03c5bdf1f672dd5845a757e09cde1c18dc"})))};return t}();VerdocsButtonPanel.style=VerdocsButtonPanelStyle0;export{VerdocsButtonPanel as verdocs_button_panel};
+var __awaiter=this&&this.__awaiter||function(t,e,n,o){function r(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,i){function a(t){try{s(o.next(t))}catch(t){i(t)}}function c(t){try{s(o["throw"](t))}catch(t){i(t)}}function s(t){t.done?n(t.value):r(t.value).then(a,c)}s((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},o,r,i,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(t){return function(e){return s([t,e])}}function s(c){if(o)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(n=0)),n)try{if(o=1,r&&(i=c[0]&2?r["return"]:c[0]?r["throw"]||((i=r["return"])&&i.call(r),0):r.next)&&!(i=i.call(r,c[1])).done)return i;if(r=0,i)c=[c[0]&2,i.value];switch(c[0]){case 0:case 1:i=c;break;case 4:n.label++;return{value:c[1],done:false};case 5:n.label++;r=c[1];c=[0];continue;case 7:c=n.ops.pop();n.trys.pop();continue;default:if(!(i=n.trys,i=i.length>0&&i[i.length-1])&&(c[0]===6||c[0]===2)){n=0;continue}if(c[0]===3&&(!i||c[1]>i[0]&&c[1]<i[3])){n.label=c[1];break}if(c[0]===6&&n.label<i[1]){n.label=i[1];i=c;break}if(i&&n.label<i[2]){n.label=i[2];n.ops.push(c);break}if(i[2])n.ops.pop();n.trys.pop();continue}c=e.call(t,n)}catch(t){c=[6,t];r=0}finally{o=i=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{r as registerInstance,h,H as Host}from"./index-b89cf6a4.js";import{c as createPopper}from"./popper-0fbeff6d.js";var verdocsButtonPanelCss='@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-button-panel{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:"";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{font-size:16px;font-weight:bold;margin:0 0 16px 0;color:#092c4c;border-bottom:1px solid #cccccc}';var VerdocsButtonPanelStyle0=verdocsButtonPanelCss;var VerdocsButtonPanel=function(){function t(t){registerInstance(this,t);this.showing=false;this.icon=""}t.prototype.componentDidRender=function(){document.body.appendChild(this.panelEl);if(this.popperInstance){this.popperInstance.destroy()}this.popperInstance=createPopper(this.iconEl,this.panelEl,{})};t.prototype.disconnectedCallback=function(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}if(this.panelEl){this.panelEl.remove()}};t.prototype.showPanel=function(){return __awaiter(this,void 0,void 0,(function(){var t,e;var n=this;return __generator(this,(function(o){(t=this.panelEl)===null||t===void 0?void 0:t.setAttribute("data-show","");(e=this.popperInstance)===null||e===void 0?void 0:e.update().catch((function(){}));this.showing=true;this.hiderEl=document.createElement("div");this.hiderEl.id="verdocs-button-panel-hider";this.hiderEl.style.zIndex="100";this.hiderEl.style.position="absolute";this.hiderEl.style.top="0px";this.hiderEl.style.left="0px";this.hiderEl.style.right="0px";this.hiderEl.style.bottom="0px";this.hiderEl.onclick=function(t){t.stopPropagation();n.toggle()};document.body.appendChild(this.hiderEl);return[2]}))}))};t.prototype.hidePanel=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){Array.from(document.getElementsByClassName("verdocs-button-panel-content")).forEach((function(t){t.removeAttribute("data-show")}));(t=document.getElementById("verdocs-button-panel-hider"))===null||t===void 0?void 0:t.remove();this.showing=false;return[2]}))}))};t.prototype.toggle=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!this.showing)return[3,2];return[4,this.hidePanel()];case 1:t.sent();return[3,4];case 2:return[4,this.showPanel()];case 3:t.sent();t.label=4;case 4:return[2]}}))}))};t.prototype.render=function(){var t=this;return h(Host,{key:"875a734696925dd22625880b694e32c4845e1254"},h("div",{key:"cc83aef76b34b3e9031160451f9643168d41cf3b",class:"icon",innerHTML:this.icon,onClick:function(e){e.stopPropagation();return t.toggle()},ref:function(e){return t.iconEl=e}}),h("div",{key:"136375bb517b9d86327c6fa63b115f3f496df7a4",role:"tooltip",class:"verdocs-button-panel-content","data-popper-placement":"bottom",ref:function(e){return t.panelEl=e}},h("div",{key:"065c60cf39be8a608fbc5e2199b09cb55d8a551b","data-popper-arrow":"true",class:"arrow"}),h("slot",{key:"85af4ff2a549a5d062fff08bf17d1c6c24c439e5"})))};return t}();VerdocsButtonPanel.style=VerdocsButtonPanelStyle0;export{VerdocsButtonPanel as verdocs_button_panel};