@zanichelli/delta_share 3.2.0 → 3.2.2

package/dist/wc/cjs/{license-activation_11.cjs.entry.js → license-activation_10.cjs.entry.js}

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9ca7d5e5.js');
+const index = require('./index-fd6e6c28.js');
 const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
-const index$1 = require('./index-c0af2262.js');
-const icons = require('./icons-5006d741.js');
-const utils = require('./utils-8fd01df0.js');
+const index$1 = require('./index-029f1a7e.js');
+const icons = require('./icons-6d7ce4fc.js');
+const utils = require('./utils-43a3deb6.js');
 require('./breakpoints-e7c8838e.js');
 
 var DeviceEnum;
@@ -1738,7 +1738,6 @@ const LicenseActivation = class {
     this.licenseStatusChange = index.createEvent(this, "licenseStatusChange", 7);
     /** env: values: "local" | "devmy" | "testmy" | "demomy" | "prod" */
     this.env = "prod";
-    this.initialShowInfoBox = false;
     this.licenseActivationState = licenseInitialState;
   }
   async componentWillLoad() {
@@ -1763,8 +1762,7 @@ const LicenseActivation = class {
     this.licenseModalState.emit({ value: "closed" });
     this.resetStore();
   }
-  handleLicenseModalOpen(initialShowInfoBox) {
-    this.initialShowInfoBox = initialShowInfoBox;
+  handleLicenseModalOpen() {
     this.submitClicked = true;
     this.modalState = "open";
     this.licenseModalState.emit({ value: "open" });
@@ -1799,7 +1797,7 @@ const LicenseActivation = class {
     if (this.licenseActivationState.licenseActivationCode === sampleCode) {
       this.licenseActivationState = Object.assign(Object.assign({}, this.licenseActivationState), { licenseActivationMessage: sampleCodeError, licenseActivationStatus: "fail", licenseActivationApiData: null });
       this.emitStatusChange();
-      this.handleLicenseModalOpen(false);
+      this.handleLicenseModalOpen();
     }
     try {
       const response = await post(url, { code: this.licenseActivationState.licenseActivationCode }, null, requestOpt);
@@ -1810,20 +1808,20 @@ const LicenseActivation = class {
       this.emitStatusChange();
       response.ok
         ? this.handleLicenseModalClose()
-        : this.handleLicenseModalOpen(false);
+        : this.handleLicenseModalOpen();
     }
     catch (error) {
       const { response } = error;
       this.licenseActivationState = Object.assign(Object.assign({}, this.licenseActivationState), { licenseActivationApiLoading: false, licenseActivationApiLoaded: true, licenseActivationApiError: error, licenseActivationStatus: "fail", licenseActivationMessage: handleResponseError(await response.json()), licenseActivationApiData: null });
       this.emitStatusChange();
-      this.handleLicenseModalOpen(false);
+      this.handleLicenseModalOpen();
     }
   }
   async handleSubmitButtonClick(inputVal) {
     const { licenseActivationState: { licenseActivationStatus }, } = this;
     this.licenseActivationState = Object.assign(Object.assign({}, this.licenseActivationState), { licenseActivationCode: inputVal });
     if (!inputVal) {
-      this.handleLicenseModalOpen(false);
+      this.handleLicenseModalOpen();
     }
     if ((this.variant === LicenseActivationVariantEnum.modal ||
       this.modalState === "open" ||
@@ -1855,10 +1853,13 @@ const LicenseActivation = class {
     const { licenseActivationStatus } = this.licenseActivationState;
     let description = null, defaultInputMessage = null;
     if (variant === LicenseActivationVariantEnum.modal) {
-      description = additionalDescription || this.cms["newdashboard.licenseActivation.additionalDescription"];
+      description =
+        additionalDescription ||
+          this.cms["newdashboard.licenseActivation.additionalDescription"];
     }
     else {
-      defaultInputMessage = this.cms["newdashboard.licenseActivation.inputHelperMessage"];
+      defaultInputMessage =
+        this.cms["newdashboard.licenseActivation.inputHelperMessage"];
     }
     return {
       inputStatus: this.mapInputStatus(licenseActivationStatus),
@@ -1866,7 +1867,8 @@ const LicenseActivation = class {
       placeholder: inputPlaceholder ||
         this.cms["newdashboard.licenseActivation.inputPlaceholder"],
       inputLabel: inputLabel || this.cms["newdashboard.licenseActivation.inputLabel"],
-      buttonLabel: buttonLabel || this.cms["newdashboard.onboarding.licenseActivation.submitLabel"],
+      buttonLabel: buttonLabel ||
+        this.cms["newdashboard.onboarding.licenseActivation.submitLabel"],
       buttonIcon,
       previewInputPlaceholder,
       previewButtonLabel,
@@ -1878,14 +1880,14 @@ const LicenseActivation = class {
       infoBoxIcon: `${this.environment.URL_S3_IMAGES_FOLDER}bollinoSIAE.svg`,
       infoBoxContent: this.cms["newdashboard.licenseActivation.infoBoxContent"],
       supportLink: this.cms["newdashboard.licenseActivation.contactUs.url"],
-      additionalDescription: description
+      additionalDescription: description,
     };
   }
   renderLicenseActivationForm(variant) {
     const { componentid } = this;
     const { licenseActivationState: { licenseActivationMessage, licenseActivationCode, licenseActivationApiLoading, }, } = this;
     const textObject = this.retrieveTextsObject(variant);
-    return (index.h("license-activation-form", { direction: "column", error: licenseActivationMessage, initialCode: licenseActivationCode, formTexts: textObject, requestLoading: !!licenseActivationApiLoading, enableButton: this.enableFormSubmitButton, formid: componentid, initialShowInfoBox: this.initialShowInfoBox, onFormInputChange: (e) => this.handleFormInputChange(e.detail.value), onSubmitButtonClick: (e) => this.handleSubmitButtonClick(e.detail.value), variant: variant, handleModalOpen: () => this.handleLicenseModalOpen(true) }));
+    return (index.h("license-activation-form", { direction: "column", error: licenseActivationMessage, initialCode: licenseActivationCode, formTexts: textObject, requestLoading: !!licenseActivationApiLoading, enableButton: this.enableFormSubmitButton, formid: componentid, onFormInputChange: (e) => this.handleFormInputChange(e.detail.value), onSubmitButtonClick: (e) => this.handleSubmitButtonClick(e.detail.value), variant: variant, handleModalOpen: () => this.handleLicenseModalOpen() }));
   }
   renderMobileButton() {
     return (index.h("z-button", { onClick: () => this.handleMobileButtonClick() }, this.cms["newdashboard.onboarding.licenseActivation.mobileSubmitLabel"]));
@@ -1930,7 +1932,7 @@ const LicenseActivationBox = class {
 };
 LicenseActivationBox.style = licenseActivationBoxCss;
 
-const licenseActivationFormCss = ".sc-license-activation-form-h{display:block}.sc-license-activation-form-h>div.sc-license-activation-form>.body-3.sc-license-activation-form{display:block;margin-bottom:calc(var(--space-unit) * 4)}.sc-license-activation-form-h>div.sc-license-activation-form>z-button.sc-license-activation-form{padding:calc(var(--space-unit) * 2) 0;width:100%}.sc-license-activation-form-h>div.sc-license-activation-form>z-input.sc-license-activation-form{width:100%}.sc-license-activation-form-h>z-link.sc-license-activation-form{font-weight:bold}.sc-license-activation-form-h>div.sc-license-activation-form>z-info-box.sc-license-activation-form>div.sc-license-activation-form{display:flex}[variant=\"modal\"].sc-license-activation-form-h{padding:calc(var(--space-unit) * 2)}[variant=\"modal\"].sc-license-activation-form-h .error-section.sc-license-activation-form{display:flex;flex-direction:column;border-top:var(--border-size-small) solid var(--color-surface03);margin-top:calc(var(--space-unit) * 3);padding-top:calc(var(--space-unit) * 2)}[variant=\"modal\"].sc-license-activation-form-h .error-section.sc-license-activation-form>span.sc-license-activation-form{padding:calc(var(--space-unit) * 2) 0;display:block;color:var(--color-text01);fill:var(--color-text01);font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;line-height:20px}[variant=\"preview\"].sc-license-activation-form-h{margin:0;padding:0}[variant=\"preview\"].sc-license-activation-form-h>div.sc-license-activation-form>z-button.sc-license-activation-form{margin:0;padding:0;width:initial}[variant=\"preview\"].sc-license-activation-form-h .license-input-container.sc-license-activation-form{width:100%;margin-right:calc(var(--space-unit) * 2)}.sc-license-activation-form-h .license-input-container.sc-license-activation-form>z-input.sc-license-activation-form{width:100%}@media only screen and (min-width: 768px){[variant=\"modal\"].sc-license-activation-form-h{padding:calc(var(--space-unit) * 3);width:396px}.sc-license-activation-form-h>div.sc-license-activation-form{display:flex;flex-direction:row}[variant=\"modal\"].sc-license-activation-form-h>div.sc-license-activation-form{flex-direction:column}.sc-license-activation-form-h>div.sc-license-activation-form>z-button.sc-license-activation-form{padding-top:calc(var(--space-unit) * 3);padding-left:calc(var(--space-unit) * 2);width:auto}[variant=\"preview\"].sc-license-activation-form-h>div.sc-license-activation-form>z-button.sc-license-activation-form{padding-top:0}[variant=\"modal\"].sc-license-activation-form-h>div.sc-license-activation-form>z-button.sc-license-activation-form{padding:calc(var(--space-unit) * 3) 0 calc(var(--space-unit) * 2);width:max-content}[variant=\"modal\"].sc-license-activation-form-h .error-section.sc-license-activation-form>z-button.sc-license-activation-form{width:max-content}}@media only screen and (min-width: 1152px){.sc-license-activation-form-h>div.sc-license-activation-form{flex-direction:row}}@media only screen and (min-width: 1366px){[variant=\"modal\"].sc-license-activation-form-h{padding:calc(var(--space-unit) * 4);width:477px}}";
+const licenseActivationFormCss = ".sc-license-activation-form-h{display:block}.sc-license-activation-form-h>div.sc-license-activation-form>.body-3.sc-license-activation-form{display:block;margin-bottom:calc(var(--space-unit) * 4)}.sc-license-activation-form-h>div.sc-license-activation-form>z-button.sc-license-activation-form{padding:calc(var(--space-unit) * 2) 0;width:100%}.sc-license-activation-form-h>div.sc-license-activation-form>z-input.sc-license-activation-form{width:100%}.sc-license-activation-form-h>div.sc-license-activation-form>z-info-box.sc-license-activation-form>div.sc-license-activation-form{display:flex}[variant=\"modal\"].sc-license-activation-form-h{padding:calc(var(--space-unit) * 2)}[variant=\"modal\"].sc-license-activation-form-h .error-section.sc-license-activation-form{display:flex;flex-direction:column;border-top:var(--border-size-small) solid var(--color-surface03);margin-top:calc(var(--space-unit) * 3);padding-top:calc(var(--space-unit) * 2)}[variant=\"modal\"].sc-license-activation-form-h .error-section.sc-license-activation-form>span.sc-license-activation-form{padding:calc(var(--space-unit) * 2) 0;display:block;color:var(--color-text01);fill:var(--color-text01);font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;line-height:20px}[variant=\"preview\"].sc-license-activation-form-h{margin:0;padding:0}[variant=\"preview\"].sc-license-activation-form-h>div.sc-license-activation-form>z-button.sc-license-activation-form{margin:0;padding:0;width:initial}[variant=\"preview\"].sc-license-activation-form-h .license-input-container.sc-license-activation-form{width:100%;margin-right:calc(var(--space-unit) * 2)}[variant=\"modal\"].sc-license-activation-form-h .infobox-content.sc-license-activation-form{display:flex;align-items:center;color:var(--color-link-primary);column-gap:0.5em;padding:calc(var(--space-unit) / 2) 0}[variant=\"modal\"].sc-license-activation-form-h .infobox-content.sc-license-activation-form z-icon.sc-license-activation-form{fill:var(--color-link-primary)}.sc-license-activation-form-h .license-input-container.sc-license-activation-form>z-input.sc-license-activation-form{width:100%}@media only screen and (min-width: 768px){[variant=\"modal\"].sc-license-activation-form-h{padding:calc(var(--space-unit) * 3);width:396px}.sc-license-activation-form-h>div.sc-license-activation-form{display:flex;flex-direction:row}[variant=\"modal\"].sc-license-activation-form-h>div.sc-license-activation-form{flex-direction:column}.sc-license-activation-form-h>div.sc-license-activation-form>z-button.sc-license-activation-form{padding-top:calc(var(--space-unit) * 3);padding-left:calc(var(--space-unit) * 2);width:auto}[variant=\"preview\"].sc-license-activation-form-h>div.sc-license-activation-form>z-button.sc-license-activation-form{padding-top:0}[variant=\"modal\"].sc-license-activation-form-h>div.sc-license-activation-form>z-button.sc-license-activation-form{padding:calc(var(--space-unit) * 3) 0 calc(var(--space-unit) * 2);width:max-content}[variant=\"modal\"].sc-license-activation-form-h .error-section.sc-license-activation-form>z-button.sc-license-activation-form{width:max-content}}@media only screen and (min-width: 1152px){.sc-license-activation-form-h>div.sc-license-activation-form{flex-direction:row}}@media only screen and (min-width: 1366px){[variant=\"modal\"].sc-license-activation-form-h{padding:calc(var(--space-unit) * 4);width:477px}}";
 
 const LicenseActivationForm = class {
   constructor(hostRef) {
@@ -1958,7 +1960,6 @@ const LicenseActivationForm = class {
     }
   }
   componentWillLoad() {
-    this.showInfoBox = !!this.initialShowInfoBox;
     this.inputVal = this.initialCode ? this.initialCode : "";
   }
   handleFormInputChange(detail) {
@@ -1969,9 +1970,6 @@ const LicenseActivationForm = class {
     this.submitButtonClick.emit({ value: inputVal });
   }
   handleInfoClick() {
-    if (this.variant === LicenseActivationVariantEnum.modal) {
-      this.showInfoBox = true;
-    }
     if (this.variant === LicenseActivationVariantEnum.box ||
       this.variant === LicenseActivationVariantEnum.preview) {
       this.handleModalOpen();
@@ -2007,34 +2005,27 @@ const LicenseActivationForm = class {
     const disabled = (this.variant === LicenseActivationVariantEnum.modal && !this.inputVal) ||
       !!this.requestLoading ||
       !this.enableButton;
-    return (index.h("z-button", { variant: index$1.ButtonVariant.primary, size: this.getButtonSize(this.variant), icon: this.getButtonIcon(this.variant), disabled: disabled, onClick: () => this.handleSubmitButtonClick(this.inputVal) }, this.getButtonLabel(this.variant)));
+    return (index.h("z-button", { ariaLabel: "attiva il libro digitale", variant: index$1.ButtonVariant.primary, size: this.getButtonSize(this.variant), icon: this.getButtonIcon(this.variant), disabled: disabled, onClick: () => this.handleSubmitButtonClick(this.inputVal) }, this.getButtonLabel(this.variant)));
   }
   renderAdditionalDescription() {
     const { additionalDescription } = this.formTexts;
     if (!additionalDescription)
       return;
-    return index.h("span", { class: "body-3", innerHTML: manageMarkupContent(additionalDescription) });
+    return (index.h("span", { class: "body-3", innerHTML: manageMarkupContent(additionalDescription) }));
   }
   renderInfoLink() {
     const { linkLabel } = this.formTexts;
     if (this.variant === LicenseActivationVariantEnum.preview)
       return;
-    return (index.h("z-link", { icon: "question-mark", onClick: () => this.handleInfoClick(), onKeyUp: (e) => {
-        if (e.code === "Enter")
-          this.handleInfoClick();
-      } }, linkLabel));
+    if (this.variant === LicenseActivationVariantEnum.modal)
+      return (index.h("span", { class: "infobox-content body-4-sb" }, index.h("z-icon", { name: "question-mark" }), " ", linkLabel));
+    return (index.h("button", { class: "z-link z-link-icon z-link-sb", "aria-label": `${linkLabel} clicca per avere maggiori informazioni`, onClick: () => this.handleInfoClick() }, index.h("z-icon", { name: "question-mark" }), linkLabel));
   }
   renderInfoBox() {
-    if (!this.showInfoBox)
+    if (this.variant !== LicenseActivationVariantEnum.modal)
       return;
     const { infoBoxContent, infoBoxIcon } = this.formTexts;
-    return (index.h("z-info-box", { boxid: "singleInputFormInfoSection", isclosable: true, onClick: (e) => this.handleInfoBoxClick(e) }, index.h("div", { slot: "content" }, infoBoxIcon && (index.h("span", { "aria-hidden": "true" }, index.h("img", { src: infoBoxIcon, alt: "" }))), infoBoxContent && (index.h("span", { innerHTML: manageMarkupContent(infoBoxContent) })))));
-  }
-  handleInfoBoxClick(e) {
-    const cp = e.composedPath();
-    if (cp.find((elem) => elem.dataset && elem.dataset.action === "infoBoxClose")) {
-      this.showInfoBox = false;
-    }
+    return (index.h("z-info-box", { boxid: "singleInputFormInfoSection", isclosable: false }, index.h("div", { slot: "content" }, infoBoxIcon && (index.h("span", { "aria-hidden": "true" }, index.h("img", { src: infoBoxIcon, alt: "" }))), infoBoxContent && (index.h("span", { innerHTML: manageMarkupContent(infoBoxContent) })))));
   }
   redirectToSupport() {
     const { formTexts } = this;
@@ -2046,7 +2037,7 @@ const LicenseActivationForm = class {
     if (this.variant !== LicenseActivationVariantEnum.modal || !this.error)
       return;
     const { errorButtonLabel, errorSectionMessage } = this.formTexts;
-    return (index.h("section", { class: "error-section" }, index.h("span", { class: "heading-01" }, errorSectionMessage), index.h("z-button", { variant: index$1.ButtonVariant.secondary, onClick: this.redirectToSupport }, errorButtonLabel)));
+    return (index.h("section", { class: "error-section" }, index.h("span", { class: "heading-01" }, errorSectionMessage), index.h("z-button", { variant: index$1.ButtonVariant.secondary, onClick: this.redirectToSupport, role: "link" }, errorButtonLabel)));
   }
   getButtonSize(variant) {
     const { previewButtonSize } = this.formTexts;
@@ -2104,7 +2095,7 @@ const LicenseActivationModal = class {
 };
 LicenseActivationModal.style = licenseActivationModalCss;
 
-const stylesCss$6 = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled=\"false\"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}[size=\"big\"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size=\"small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size=\"x-small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant=\"primary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant=\"secondary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-primary01)}@media (hover: hover){[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant=\"tertiary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-disabled02)}";
+const stylesCss$5 = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled=\"false\"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}[size=\"big\"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size=\"small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size=\"x-small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant=\"primary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant=\"secondary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary02);background-color:var(--color-primary02);color:var(--color-primary01)}@media (hover: hover){[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant=\"tertiary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-disabled02)}";
 
 const ZButton = class {
   constructor(hostRef) {
@@ -2133,13 +2124,13 @@ const ZButton = class {
     if (this.href) {
       return (index.h("a", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, href: this.href, target: this.target }), this.icon && (index.h("z-icon", { name: this.icon, width: 16, height: 16 })), index.h("slot", null)));
     }
-    return (index.h("button", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, name: this.name, type: this.type, disabled: this.disabled }), this.icon && (index.h("z-icon", { name: this.icon, width: 16, height: 16 })), index.h("slot", null)));
+    return (index.h("button", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, name: this.name, type: this.type, role: this.role, disabled: this.disabled }), this.icon && (index.h("z-icon", { name: this.icon, width: 16, height: 16 })), index.h("slot", null)));
   }
   get hostElement() { return index.getElement(this); }
 };
-ZButton.style = stylesCss$6;
+ZButton.style = stylesCss$5;
 
-const stylesCss$5 = ":host{margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}:host svg:not([width]){width:var(--z-icon-width, 18px)}:host svg:not([height]){height:var(--z-icon-height, 18px)}";
+const stylesCss$4 = ":host{margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}:host svg:not([width]){width:var(--z-icon-width, 18px)}:host svg:not([height]){height:var(--z-icon-height, 18px)}";
 
 const ZIcon = class {
   constructor(hostRef) {
@@ -2155,9 +2146,9 @@ const ZIcon = class {
     return (index.h(index.Host, { "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(icons.ICONS[this.name]))));
   }
 };
-ZIcon.style = stylesCss$5;
+ZIcon.style = stylesCss$4;
 
-const stylesCss$4 = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;padding:calc(var(--space-unit) * 2);background:var(--accent-lighter);border-radius:var(--border-radius)}:host>div>slot{color:var(--text-grey-800);font-size:14px}:host>div>z-icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--myz-blue)}";
+const stylesCss$3 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;padding:calc(var(--space-unit) * 2);background:var(--color-primary03);border-radius:var(--border-radius)}:host>div>slot{color:var(--color-text01);font-size:14px}:host>div>z-icon{margin-left:calc(var(--space-unit) * 2);cursor:pointer;fill:var(--color-primary01)}";
 
 const ZInfoBox = class {
   constructor(hostRef) {
@@ -2173,9 +2164,9 @@ const ZInfoBox = class {
     return (index.h("div", { id: this.boxid }, index.h("slot", { name: "content" }), this.isclosable && (index.h("z-icon", { name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
   }
 };
-ZInfoBox.style = stylesCss$4;
+ZInfoBox.style = stylesCss$3;
 
-const stylesCss$3 = ".sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text01);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}[size=\"small\"].sc-z-input-h input.sc-z-input,[size=\"small\"].sc-z-input-h textarea.sc-z-input,[size=\"small\"].sc-z-input-h .textarea-wrapper.sc-z-input,[size=\"x-small\"].sc-z-input-h input.sc-z-input,[size=\"x-small\"].sc-z-input-h textarea.sc-z-input,[size=\"x-small\"].sc-z-input-h .textarea-wrapper.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.textarea-wrapper.sc-z-input:focus-within{box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-primary02)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--blue500)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{box-shadow:none}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) z-icon.sc-z-input{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled=\"false\"]) label.input-label.sc-z-input{color:var(--color-disabled02)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size=\"small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size=\"x-small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:hover,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:focus,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:active{background:var(--color-white) !important;background-clip:text !important;-webkit-transition-delay:99999s !important}.textarea-wrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled02)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}";
+const stylesCss$2 = ".sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text01);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}[size=\"small\"].sc-z-input-h input.sc-z-input,[size=\"small\"].sc-z-input-h textarea.sc-z-input,[size=\"small\"].sc-z-input-h .textarea-wrapper.sc-z-input,[size=\"x-small\"].sc-z-input-h input.sc-z-input,[size=\"x-small\"].sc-z-input-h textarea.sc-z-input,[size=\"x-small\"].sc-z-input-h .textarea-wrapper.sc-z-input{font-size:var(--font-size-2)}.cursor-select.sc-z-input-h input.sc-z-input{cursor:pointer}.sc-z-input-h:not(.active-select) input.sc-z-input:focus:focus-visible,.textarea-wrapper.sc-z-input:focus-within{box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-input-field02)}.active-select.sc-z-input-h input.sc-z-input{border:var(--border-size-small) solid var(--blue500)}.cursor-select.sc-z-input-h input.sc-z-input:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-input-h input[readonly].sc-z-input:focus:focus-visible{box-shadow:none}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}.sc-z-input-h:not(.active-select) input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) z-icon.sc-z-input{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled=\"false\"]) label.input-label.sc-z-input{color:var(--color-disabled02)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}[size=\"small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4.5)}[size=\"x-small\"].sc-z-input-h .text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.hidden.sc-z-input{display:none}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.small.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.x-small.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:currentcolor}.textarea-wrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size=\"small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size=\"x-small\"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled02)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}";
 
 const ZInput = class {
   constructor(hostRef) {
@@ -2283,6 +2274,8 @@ const ZInput = class {
       readonly: this.readonly,
       required: this.required,
       title: this.htmltitle,
+      minlength: this.minlength,
+      maxlength: this.maxlength,
       class: {
         [`input-${this.status}`]: !!this.status,
         filled: !!this.value,
@@ -2341,7 +2334,7 @@ const ZInput = class {
     if (!this.icon) {
       return;
     }
-    return (index.h("button", { type: "button", class: "icon-button input-icon", tabIndex: -1 }, index.h("z-icon", { name: this.icon, class: this.size })));
+    return (index.h("button", { type: "button", class: "icon-button input-icon", tabIndex: -1, "aria-hidden": "true" }, index.h("z-icon", { name: this.icon, class: this.size })));
   }
   renderResetIcon() {
     let hidden = false;
@@ -2411,9 +2404,9 @@ const ZInput = class {
   }
   get hostElement() { return index.getElement(this); }
 };
-ZInput.style = stylesCss$3;
+ZInput.style = stylesCss$2;
 
-const stylesCss$2 = ":host{display:flex;min-height:calc(var(--space-unit) * 2.5);align-items:start;margin-top:var(--space-unit);color:var(--color-text05);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host(.small),:host(.x-small){margin-top:calc(var(--space-unit) * 0.5);font-size:var(--font-size-1)}:host([status=\"success\"]){color:var(--color-text-success)}:host([status=\"error\"]){color:var(--color-text-error)}:host([status=\"warning\"]){color:var(--color-warning02)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit);margin-top:calc(var(--space-unit) * 0.25)}:host(.small)>z-icon,:host(.x-small)>z-icon{--z-icon-width:14px;--z-icon-height:14px;--z-icon-right-margin:calc(var(--space-unit) * 0.5)}";
+const stylesCss$1 = ":host{display:flex;min-height:calc(var(--space-unit) * 2.5);align-items:start;margin-top:var(--space-unit);color:var(--color-text05);fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host(.small),:host(.x-small){margin-top:calc(var(--space-unit) * 0.5);font-size:var(--font-size-1)}:host([status=\"success\"]){color:var(--color-text-success)}:host([status=\"error\"]){color:var(--color-text-error)}:host([status=\"warning\"]){color:var(--color-warning02)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);--z-icon-right-margin:var(--space-unit);margin-top:calc(var(--space-unit) * 0.25)}:host(.small)>z-icon,:host(.x-small)>z-icon{--z-icon-width:14px;--z-icon-height:14px;--z-icon-right-margin:calc(var(--space-unit) * 0.5)}";
 
 const ZInputMessage = class {
   constructor(hostRef) {
@@ -2439,74 +2432,7 @@ const ZInputMessage = class {
     "status": ["onMessageChange"]
   }; }
 };
-ZInputMessage.style = stylesCss$2;
-
-const stylesCss$1 = ":host{--font-size-link:inherit;--font-weight-link:inherit;font-family:var(--font-family-sans);font-size:var(--font-size-link);font-weight:var(--font-weight-link);line-height:inherit;outline:none}:host([big]){--font-size-link:16px;--font-weight-link:var(--font-sb)}a{display:inline-flex;align-items:center;padding:calc(var(--space-unit) * 0.5) 0;border-top:var(--border-size-medium) solid transparent;border-bottom:var(--border-size-medium) solid transparent;color:var(--color-link-primary);cursor:pointer;fill:var(--color-link-primary);text-decoration:none}a:hover,a:focus,a:active{text-decoration:underline}a.active{color:var(--color-active-link);fill:var(--color-active-link)}a:hover,a:focus{color:var(--color-hover-link);fill:var(--color-hover-link)}a:active{color:var(--color-pressed-link);fill:var(--color-pressed-link)}a:visited{color:var(--color-visited-link);fill:var(--color-visited-link)}a.disabled,a.inverse.disabled{color:var(--color-disabled03);cursor:default;fill:var(--color-disabled03);pointer-events:none}a.underline,a.underline:active,a.underline:hover,a.underline:visited,a.underline.disabled,a.underline.black,a.underline.white{text-decoration:underline}a.disabled,a.disabled:active,a.disabled:visited,a.disabled:hover{text-decoration:none}a.inverse{color:var(--color-inverse-link);fill:var(--color-inverse-link)}a.inverse.active{color:var(--color-inverse-active-link);fill:var(--color-inverse-active-link)}a.inverse:hover,a.inverse:focus{color:var(--color-inverse-hover-link);fill:var(--color-inverse-hover-link)}a.inverse:active{color:var(--color-inverse-pressed-link);fill:var(--color-inverse-pressed-link)}a.inverse:visited{color:var(--color-inverse-visited-link);fill:var(--color-inverse-visited-link)}a.black{color:var(--gray800);fill:var(--gray800);text-decoration:none}a.black:hover,a.black.active{color:var(--color-black);fill:var(--color-black)}a.black:visited{color:var(--gray800);fill:var(--gray800)}a.black:hover,a.black:focus,a.black:active{text-decoration:underline}a.black:active{color:var(--gray700);fill:var(--gray700)}a.white,a.white:active,a.white:hover,a.white.active{color:var(--bg-white);fill:var(--bg-white);text-decoration:none}a.white:visited{color:var(--bg-white);fill:var(--bg-white)}a.white:hover,a.white:focus,a.white:active{text-decoration:underline}a.white.disabled,a.black.disabled{color:var(--gray500);fill:var(--gray500)}a>z-icon:first-child{margin-right:var(--space-unit)}a>z-icon:last-child{margin-left:var(--space-unit)}";
-
-const ZLink = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.zLinkClick = index.createEvent(this, "zLinkClick", 7);
-    /** link target (optional) */
-    this.target = "_self";
-    /** tabindex link attribute (optional) */
-    this.htmltabindex = 0;
-    /** disable link flag (optional) */
-    this.isdisabled = false;
-    /** active link flag (optional) */
-    this.isactive = false;
-    /** white variant flag (optional) */
-    this.iswhite = false;
-    /** link text variant (optional) */
-    this.textcolor = "primary";
-    /** big link version */
-    this.big = false;
-    /** link icon position (optional) */
-    this.iconposition = "left";
-    /** draw underline on text (optional) */
-    this.underline = false;
-    this.iconSize = 18;
-    this.emitZLinkClick = this.emitZLinkClick.bind(this);
-    this.emitZLinkInteraction = this.emitZLinkInteraction.bind(this);
-  }
-  componentWillLoad() {
-    if (this.iswhite) {
-      console.warn("z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead");
-    }
-    if (this.big) {
-      console.warn("z-link big prop is deprecated and will be dropped in a next release, please override --font-size-link and --font-weight-link variables instead");
-    }
-  }
-  emitZLinkClick(e, linkId) {
-    this.emitZLinkInteraction(e, linkId);
-  }
-  emitZLinkInteraction(e, linkId) {
-    this.zLinkClick.emit({ e, linkId });
-  }
-  componentDidLoad() {
-    if (this.icon) {
-      const height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue("font-size"));
-      const currentSize = this.big ? 18 : Math.round(height * 1.125);
-      if (!Number.isNaN(currentSize) && this.iconSize !== currentSize) {
-        this.iconSize = currentSize;
-      }
-    }
-  }
-  render() {
-    return (index.h("a", { id: this.htmlid, href: this.href ? this.href : null, class: {
-        disabled: this.isdisabled,
-        active: this.isactive,
-        white: this.iswhite,
-        [this.textcolor || ""]: true,
-        underline: this.underline,
-      }, target: this.target, role: this.href ? "link" : "button", tabindex: this.isdisabled ? -1 : this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) }, this.iconposition === "right" && index.h("slot", null), this.icon && (index.h("z-icon", { style: {
-        "--z-icon-width": `${this.iconSize}px`,
-        "--z-icon-height": `${this.iconSize}px`,
-      }, name: this.icon })), this.iconposition === "left" && index.h("slot", null)));
-  }
-  get hostElement() { return index.getElement(this); }
-};
-ZLink.style = stylesCss$1;
+ZInputMessage.style = stylesCss$1;
 
 // nb. This is for IE10 and lower _only_.
 var supportCustomEvent = window.CustomEvent;
@@ -3365,7 +3291,7 @@ if (window.HTMLDialogElement === undefined) {
   HTMLFormElement.prototype.submit = replacementFormSubmit;
 }
 
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>dialog{padding:0;border:none;margin:0}:host>dialog:modal{width:100%;max-width:100%;max-height:100%}:host>dialog::backdrop{display:none}:host>dialog+.backdrop{display:none}:host>dialog:not([open]){display:none}:host>dialog[open]{display:block}.modal-container{z-index:1010;display:flex;overflow:-moz-scrollbars-none;overflow:hidden;width:100%;height:100vh;flex-direction:column}.modal-container>header{padding:calc(var(--space-unit) * 2 - 2px) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:flex;fill:var(--color-icon01)}.modal-container>header>div{display:flex;width:100%;align-items:center;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header h2{padding:0;margin:0;color:var(--color-text01);font-weight:var(--font-rg)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header h2{font-size:var(--font-size-3);letter-spacing:0;line-height:1.5}.modal-container>header>div>h1 *:empty{display:none}.modal-container>header h1+h2{margin-top:calc(var(--space-unit) * 0.5)}.modal-container>.modal-content{overflow:auto;flex:1 auto;background:var(--color-surface01);overflow-x:hidden}.modal-container .modal-content::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.modal-container .modal-content::-webkit-scrollbar-track{background-color:transparent}.modal-container .modal-content::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}.modal-container .modal-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container .modal-content{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.modal-container{position:fixed;top:calc(var(--space-unit) * 6);left:50%;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);transform:translateX(-50%)}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 3 - 2px) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 4 - 4px) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);letter-spacing:0;line-height:1.33}.modal-container>header h2{font-size:var(--font-size-4);letter-spacing:0;line-height:1.5}.modal-container>header h1+h2{margin-top:0}}";
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>dialog{padding:0;border:none;margin:0;background-color:transparent}:host>dialog:modal{width:100%;max-width:100%;max-height:100%}:host>dialog::backdrop{display:none}:host>dialog+.backdrop{display:none}:host>dialog:not([open]){display:none}:host>dialog[open]{display:block}.modal-container{z-index:1010;display:flex;overflow:-moz-scrollbars-none;width:100%;height:100vh;flex-direction:column}.modal-container>.modal-content-scroll-outside{overflow:auto;background:var(--color-surface01)}.modal-container>header{padding:calc(var(--space-unit) * 2 - 2px) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:flex;fill:var(--color-icon01)}.modal-container>header>div{display:flex;width:100%;align-items:center;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header h2{padding:0;margin:0;color:var(--color-text01);font-weight:var(--font-rg)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header h2{font-size:var(--font-size-3);letter-spacing:0;line-height:1.5}.modal-container>header>div>h1 *:empty{display:none}.modal-container>header h1+h2{margin-top:calc(var(--space-unit) * 0.5)}.modal-container-scroll-inside>.modal-content-scroll-inside{overflow:hidden auto;flex:1 auto;background:var(--color-surface01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}.modal-container-scroll-inside>.modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,.modal-container-scroll-outside>.modal-content-scroll-outside::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container-scroll-inside .modal-content-scroll-inside,.modal-container-scroll-outside .modal-content-scroll-outside{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-background{position:fixed;top:0;left:0;overflow:hidden;width:100vw;height:100vh;background-color:var(--gray900);opacity:0.7}.modal-background.modal-background-scroll-outside{position:sticky}.modal-container-scroll-inside{position:fixed;top:calc(var(--space-unit) * 6);left:50%;overflow:hidden;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);transform:translateX(-50%)}.modal-container-scroll-outside{position:absolute;top:calc(var(--space-unit) * 6);left:50%;display:block;overflow:initial;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));transform:translateX(-50%)}.modal-container>.modal-content-scroll-outside{overflow:initial}.modal-container-scroll-outside>header,.modal-container-scroll-inside>header{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.modal-container-scroll-outside::after{display:block;height:calc(var(--space-unit) * 6);content:\" \"}.modal-dialog{position:fixed;top:0;left:0;height:auto;overflow-x:hidden;overflow-y:auto}.modal-content-scroll-outside{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.modal-dialog::-webkit-scrollbar{display:none}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 3 - 2px) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 4 - 4px) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);letter-spacing:0;line-height:1.33}.modal-container>header h2{font-size:var(--font-size-4);letter-spacing:0;line-height:1.5}.modal-container>header h1+h2{margin-top:0}}";
 
 const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [contenteditable=""], [contenteditable="true"], a[href], [tabindex], summary):not([disabled], [disabled=""], [tabindex="-1"], [aria-hidden="true"], [hidden])';
 const ZModal = class {
@@ -3380,6 +3306,8 @@ const ZModal = class {
     this.alertdialog = false;
     /** if true, the modal is closable (optional, default is true) */
     this.closable = true;
+    /** if true, the modal can scroll inside, if false the viewport can scroll */
+    this.scrollInside = true;
   }
   emitModalClose() {
     if (this.closable) {
@@ -3460,9 +3388,21 @@ const ZModal = class {
     e.preventDefault();
   }
   render() {
-    return (index.h("dialog", { "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(),
+    return (index.h("dialog", { class: {
+        "modal-dialog": !this.scrollInside,
+      }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(),
       // @ts-ignore
-      onCancel: (e) => this.handleEscape(e) }, index.h("div", { class: "modal-container", id: this.modalid }, index.h("header", { onClick: this.emitModalHeaderActive.bind(this) }, index.h("div", null, this.modaltitle && index.h("h1", { id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && index.h("h2", { id: "modal-subtitle" }, this.modalsubtitle)), index.h("div", { class: "modal-content", id: "modal-content" }, index.h("slot", { name: "modalContent" }))), index.h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
+      onCancel: (e) => this.handleEscape(e) }, index.h("div", { class: {
+        "modal-container": true,
+        "modal-container-scroll-inside": this.scrollInside,
+        "modal-container-scroll-outside": !this.scrollInside,
+      }, id: this.modalid }, index.h("header", { onClick: this.emitModalHeaderActive.bind(this) }, index.h("div", null, this.modaltitle && index.h("h1", { id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && index.h("h2", { id: "modal-subtitle" }, this.modalsubtitle)), index.h("div", { class: {
+        "modal-content-scroll-inside": this.scrollInside,
+        "modal-content-scroll-outside": !this.scrollInside,
+      }, id: "modal-content" }, index.h("slot", { name: "modalContent" }))), index.h("div", { class: {
+        "modal-background": true,
+        "modal-background-scroll-outside": !this.scrollInside,
+      }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
         this.emitBackgroundClick();
         this.close();
       } })));
@@ -3480,5 +3420,4 @@ exports.z_icon = ZIcon;
 exports.z_info_box = ZInfoBox;
 exports.z_input = ZInput;
 exports.z_input_message = ZInputMessage;
-exports.z_link = ZLink;
 exports.z_modal = ZModal;