smoothly 1.85.0 → 1.87.0

package/dist/cjs/smoothly-app_103.cjs.entry.js

@@ -8663,7 +8663,7 @@ var Input;
     Input.registerSubAction = registerSubAction;
 })(Input || (Input = {}));
 
-const styleCss$13 = "smoothly-form{display:block;position:relative}smoothly-form>form{position:relative}smoothly-form>form>fieldset{display:flex;flex-flow:row wrap;margin-inline-start:unset;margin-inline-end:unset;padding-block-start:unset;padding-inline-start:unset;padding-inline-end:unset;padding-block-end:unset;min-inline-size:unset;border-width:unset;border-style:unset;border-color:unset;border-image:unset}smoothly-form>form>fieldset>*{flex-grow:1;min-width:min(100%, var(--smoothly-form-input-min-width, 10rem));flex-basis:40%}smoothly-form[looks=\"line\"]>form>fieldset,smoothly-form[looks=\"border\"]>form>fieldset,smoothly-form[looks=\"transparent\"]>form>fieldset{row-gap:var(--smoothly-form-row-gap, 2rem);column-gap:var(--smoothly-form-column-gap, 2rem)}smoothly-form[looks=\"grid\"]>form>fieldset{padding:1px;gap:1px}smoothly-form>form>div:not(:empty){display:flex;justify-content:end;gap:1em;margin-top:1.5rem}";
+const styleCss$13 = "smoothly-form{display:block;position:relative}smoothly-form>form{position:relative}smoothly-form>form>fieldset{display:flex;flex-flow:row wrap;margin-inline-start:unset;margin-inline-end:unset;padding-block-start:unset;padding-inline-start:unset;padding-inline-end:unset;padding-block-end:unset;min-inline-size:unset;border-width:unset;border-style:unset;border-color:unset;border-image:unset}smoothly-form>form>fieldset>*{flex-grow:1;min-width:min(100%, var(--smoothly-form-input-min-width, 14rem));flex-basis:40%}smoothly-form[looks=\"line\"]>form>fieldset,smoothly-form[looks=\"border\"]>form>fieldset,smoothly-form[looks=\"transparent\"]>form>fieldset{row-gap:var(--smoothly-form-row-gap, 2rem);column-gap:var(--smoothly-form-column-gap, 2rem)}smoothly-form[looks=\"grid\"]>form>fieldset{padding:1px;gap:1px}smoothly-form>form>div:not(:empty){display:flex;justify-content:end;gap:1em;margin-top:1.5rem}";
 const SmoothlyFormStyle0 = styleCss$13;
 
 const SmoothlyForm = class {
@@ -8838,7 +8838,7 @@ const SmoothlyForm = class {
 };
 SmoothlyForm.style = SmoothlyFormStyle0;
 
-const styleCss$12 = ".sc-smoothly-form-demo-h{display:flex;margin-top:2em;margin-bottom:10em}.sc-smoothly-form-demo-h>div.sc-smoothly-form-demo{margin:auto;width:1200px;max-width:100%}";
+const styleCss$12 = ".sc-smoothly-form-demo-h{display:flex;margin-top:2em;margin-bottom:10em}.sc-smoothly-form-demo-h>div.sc-smoothly-form-demo{margin:auto;width:1200px;max-width:calc(100% - 0.5rem)}";
 const SmoothlyFormDemoStyle0 = styleCss$12;
 
 const SmoothlyFormDemo = class {
@@ -9423,13 +9423,15 @@ class InputStateHandler {
     toString(value) {
         return this.formatter.toString(value);
     }
-    initialState(value) {
+    initialState(value, inputElement) {
         const stringValue = this.toString(value) || "";
         const start = stringValue.length;
         const state = this.createFormattedState({
             value: stringValue,
             selection: { start, end: start, direction: "none" },
         });
+        if (inputElement)
+            inputElement.value = state.value;
         return state;
     }
     setValue(inputElement, formattedState, value) {
@@ -9578,8 +9580,7 @@ const SmoothlyInput = class {
                 this.stateHandler = InputStateHandler.create(this.type, getLocale());
                 break;
         }
-        this.state = this.stateHandler.initialState((_a = this.value) !== null && _a !== void 0 ? _a : (_b = this.state) === null || _b === void 0 ? void 0 : _b.value);
-        this.inputElement && (this.state = this.stateHandler.setValue(this.inputElement, this.state, this.value));
+        this.state = this.stateHandler.initialState((_a = this.value) !== null && _a !== void 0 ? _a : (_b = this.state) === null || _b === void 0 ? void 0 : _b.value, this.inputElement);
     }
     stateChange() {
         const value = this.stateHandler.getValue(this.state);
@@ -9626,7 +9627,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (index.h(index.Host, { key: '1504c02e41ccb51d4a77b460eef9312dc89cc6e2', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '3c04573eb3f0d4d4557aeadd7bf5fb46999c49bd', name: "start" }), index.h("div", { key: 'd7470f23286de6eedce69cbf40cf6bcd45a84d4d', class: "smoothly-input-container" }, index.h("div", { key: 'b0b1b0d3ff66bb3e07cfad1835365b2ee91d77bd', class: "guide" }, index.h("div", { key: '2ae60ed4f2fc95717d02ee53e24a621cb4b6d9d4', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: '959c18357072e8bfeadc5678055804d1157e93b7', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: 'be47e5c74932b40e4a72b81ceedb766c407df9ee', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
+        return (index.h(index.Host, { key: 'ca37908f1857547c5ba7a20c512838c22e1c00c7', class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '8471966b187be0553c20aa74e94e3c524135aaba', name: "start" }), index.h("div", { key: '1aaa00ac29eea6aff4274a5ed182c9e88ecee91e', class: "smoothly-input-container" }, index.h("div", { key: '87e8dff38036d15be674c37b2aaa1b144bedd68d', class: "guide" }, index.h("div", { key: '265330f23f44613d4e82424403743aa47e1fa40f', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: 'b75d05e13da01ec15891e7710c7edf4d6f3eafed', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '0efb5ac9aa0f1ba043bc66e27b7367b22a05866e', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: async (event) => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled)
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -9641,7 +9642,7 @@ const SmoothlyInput = class {
                         this.smoothlyUserInput.emit({ name: this.name, value: this.stateHandler.getValue(this.state) });
                     }
                 }
-            } }), index.h("label", { key: '425aaa1a834f34a84281baa70be849bf33cef154', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: '6f2e73b7ae197590656f28dcab0d704a00b5c3cd' }))), this.copyable && this.value && (index.h("span", { key: '4eec70effb0c227efc7873415b6727e89b875d33', class: "copyable" }, index.h("small", { key: '00ec0857d066d900f080038cd70cfc8b6c8c32ab' }, this.copied ? "Copied!" : "Copy"), index.h("smoothly-icon", { key: '440f0bb891b39792018950d9d50135b4f611aaf0', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), index.h("smoothly-icon", { key: 'f59e0124afd354729822fb95809fd14d8919ef34', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: 'f07452e2793d65cad5b8b2a935ceea318182115e', name: "end" })));
+            } }), index.h("label", { key: '9544ecc7dabdd5a7500e6cdc436a8ea811ed1dfc', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'a9ac68c9ce32a78ac549ac6ca0e5e0af61b4df27' }))), this.copyable && this.value && (index.h("span", { key: '472fed6ffedddb52f3f62050d3a1efcabb66db6f', class: "copyable" }, index.h("small", { key: '0b31de55c8fdee49662493eedecd145265efed26' }, this.copied ? "Copied!" : "Copy"), index.h("smoothly-icon", { key: '1897225b26a2644967de560d09b9a69ae05c4e22', name: "copy-outline", size: "small", onClick: () => this.copyText(this.value), onMouseLeave: () => (this.copied = false) }))), index.h("smoothly-icon", { key: '0b39d127f197daf02a4da12adcbfa590bb0ab7ba', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", tooltip: this.errorMessage }), index.h("slot", { key: '35f89df18ba1d68b987eaf7a8da3714582a2201c', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10448,7 +10449,7 @@ const SmoothlyInputDateTime = class {
 };
 SmoothlyInputDateTime.style = SmoothlyInputDateTimeStyle0;
 
-const styleCss$O = ".sc-smoothly-input-demo-h{display:flex;flex-direction:column;margin-top:2em;margin-bottom:10rem}.sc-smoothly-input-demo-h .select-div-row.sc-smoothly-input-demo{display:flex}.sc-smoothly-input-demo-h .select-div-row.sc-smoothly-input-demo smoothly-input.sc-smoothly-input-demo{flex:1}smoothly-input-demo-standard.sc-smoothly-input-demo{margin-bottom:2rem}div.inputs.sc-smoothly-input-demo{margin:auto;width:50%}div.inputs.sc-smoothly-input-demo>h2.sc-smoothly-input-demo:not(:first-child){padding-top:3em;margin-top:3em;border-top:1px solid black}.checkbox-group.sc-smoothly-input-demo{display:flex;gap:1.5em;align-items:center;background-color:rgb(var(--smoothly-input-background))}.select-div.sc-smoothly-input-demo{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap}.select-div.sc-smoothly-input-demo>smoothly-color.sc-smoothly-input-demo>*.sc-smoothly-input-demo,.select-div.sc-smoothly-input-demo>*.sc-smoothly-input-demo{flex-basis:49%}";
+const styleCss$O = ".sc-smoothly-input-demo-h{display:flex;flex-direction:column;margin-top:2em;margin-bottom:10rem}.sc-smoothly-input-demo-h .select-div-row.sc-smoothly-input-demo{display:flex}.sc-smoothly-input-demo-h .select-div-row.sc-smoothly-input-demo smoothly-input.sc-smoothly-input-demo{flex:1}smoothly-input-demo-standard.sc-smoothly-input-demo{margin-bottom:2rem}div.inputs.sc-smoothly-input-demo{max-width:min(calc(100% - 2rem), 56rem);margin:auto}div.inputs.sc-smoothly-input-demo>h2.sc-smoothly-input-demo:not(:first-child){padding-top:3em;margin-top:3em;border-top:1px solid black}.checkbox-group.sc-smoothly-input-demo{display:flex;gap:1.5em;align-items:center;background-color:rgb(var(--smoothly-input-background))}.select-div.sc-smoothly-input-demo{display:flex;gap:1em;flex-wrap:wrap}.select-div.sc-smoothly-input-demo>*.sc-smoothly-input-demo{flex-grow:1;min-width:min(100%, var(--smoothly-form-input-min-width, 18rem));flex-basis:40%}";
 const SmoothlyInputDemoStyle0 = styleCss$O;
 
 const SmoothlyInputDemo = class {
@@ -10472,7 +10473,7 @@ const SmoothlyInputDemo = class {
 };
 SmoothlyInputDemo.style = SmoothlyInputDemoStyle0;
 
-const styleCss$N = ".sc-smoothly-input-demo-standard-h{width:50%;margin:auto}.sc-smoothly-input-demo-standard-h h2.sc-smoothly-input-demo-standard,.sc-smoothly-input-demo-standard-h p.sc-smoothly-input-demo-standard{margin:.5rem 0}.sc-smoothly-input-demo-standard-h smoothly-input-range[name=borderRadius].sc-smoothly-input-demo-standard{flex-basis:100%}div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;margin-top:1rem;grid-template-columns:2fr 1fr;gap:1rem;position:relative;justify-content:space-around}div.input-wrapper.sc-smoothly-input-demo-standard>[name].sc-smoothly-input-demo-standard{grid-column:1 / 2}div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard{width:100%;text-align:center;border-bottom:1px dashed black}div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard{align-content:center;grid-column:2 / 3;border-left:1px dashed black;padding-left:1rem;content:\"hello\"}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{width:0.5rem;grid-column:1 / 2;white-space:nowrap;overflow:visible;position:relative;cursor:default}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard::before{content:\"\";position:absolute;width:100%;top:1.5rem;bottom:-1rem;border:1px  dashed black;z-index:2}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard:hover::before{bottom:-100vh}";
+const styleCss$N = ".sc-smoothly-input-demo-standard-h{max-width:min(calc(100% - 0.5rem), 48rem);margin:auto}.sc-smoothly-input-demo-standard-h h2.sc-smoothly-input-demo-standard,.sc-smoothly-input-demo-standard-h p.sc-smoothly-input-demo-standard{margin:.5rem 0}.sc-smoothly-input-demo-standard-h>.description.sc-smoothly-input-demo-standard{--smoothly-form-input-min-width:18rem}.sc-smoothly-input-demo-standard-h smoothly-input-range[name=borderRadius].sc-smoothly-input-demo-standard{flex-basis:100%}div.input-wrapper.sc-smoothly-input-demo-standard{display:grid;margin-top:1rem;grid-template-columns:1fr 9rem;gap:1rem;position:relative;justify-content:space-around}div.input-wrapper.sc-smoothly-input-demo-standard>[name].sc-smoothly-input-demo-standard{grid-column:1 / 2}div.input-wrapper.sc-smoothly-input-demo-standard>.width.sc-smoothly-input-demo-standard{width:100%;text-align:center;border-bottom:1px dashed black}div.input-wrapper.sc-smoothly-input-demo-standard>.height.sc-smoothly-input-demo-standard{align-content:center;grid-column:2 / 3;border-left:1px dashed black;padding-left:1rem;content:\"hello\"}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard{width:0.5rem;grid-column:1 / 2;white-space:nowrap;overflow:visible;position:relative;cursor:default}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard::before{content:\"\";position:absolute;width:100%;top:1.5rem;bottom:-1rem;border:1px  dashed black;z-index:2}div.input-wrapper.sc-smoothly-input-demo-standard>.left-padding.sc-smoothly-input-demo-standard:hover::before{bottom:-100vh}";
 const SmoothlyInputDemoStandardStyle0 = styleCss$N;
 
 const SmoothlyInputDemoStandard = class {
@@ -10501,7 +10502,7 @@ const SmoothlyInputDemoStandard = class {
 };
 SmoothlyInputDemoStandard.style = SmoothlyInputDemoStandardStyle0;
 
-const styleCss$M = ".sc-smoothly-input-demo-user-input-h{max-width:min(100%, 56rem);margin-inline:auto;display:grid;grid-template-columns:12rem 1fr;gap:1rem}.sc-smoothly-input-demo-user-input-h>div.sc-smoothly-input-demo-user-input{grid-column:1 / -1}";
+const styleCss$M = ".sc-smoothly-input-demo-user-input-h{max-width:min(100%, 56rem);margin-inline:auto;display:grid;grid-template-columns:12rem 1fr;gap:1rem}.sc-smoothly-input-demo-user-input-h>div.sc-smoothly-input-demo-user-input{grid-column:1 / -1}@media (max-width: 48rem){.sc-smoothly-input-demo-user-input-h{grid-template-columns:1fr}}";
 const SmoothlyInputDemoUserInputStyle0 = styleCss$M;
 
 const SmoothlyInputDemoUserInput = class {
@@ -13444,7 +13445,7 @@ const SmoothlyThemeColorVariant = class {
 };
 SmoothlyThemeColorVariant.style = SmoothlyThemeColorVariantStyle0;
 
-const styleCss$6 = ".sc-smoothly-theme-colors-h{display:grid;grid-template-columns:repeat(3, 1fr);row-gap:1em;column-gap:1em;width:fit-content}";
+const styleCss$6 = ".sc-smoothly-theme-colors-h{display:grid;grid-template-columns:repeat(3, 1fr);row-gap:1rem;column-gap:0.5rem;width:fit-content}";
 const SmoothlyThemeColorsStyle0 = styleCss$6;
 
 const SmoothlyThemeColors$1 = class {
@@ -13468,7 +13469,7 @@ const SmoothlyThemeColors$1 = class {
 };
 SmoothlyThemeColors$1.style = SmoothlyThemeColorsStyle0;
 
-const styleCss$5 = ".sc-smoothly-theme-demo-h{display:flex;width:50%;margin:auto;flex-direction:column;gap:2em;margin-top:2em}.sc-smoothly-theme-demo-h>smoothly-theme-picker.sc-smoothly-theme-demo{width:20em}.sc-smoothly-theme-demo-h>span.sc-smoothly-theme-demo{display:flex;flex-direction:row;gap:10em}";
+const styleCss$5 = ".sc-smoothly-theme-demo-h{max-width:min(calc(100% - 2rem), 56rem);margin:auto;display:flex;flex-direction:column;gap:2em;margin-top:2em}.sc-smoothly-theme-demo-h>smoothly-theme-picker.sc-smoothly-theme-demo{width:20em}.sc-smoothly-theme-demo-h>div.sc-smoothly-theme-demo{display:flex;flex-direction:row;justify-content:space-between;gap:1rem}";
 const SmoothlyThemeDemoStyle0 = styleCss$5;
 
 const SmoothlyThemeDemo = class {
@@ -13476,12 +13477,12 @@ const SmoothlyThemeDemo = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'f3a9bce2ea9ea921ddc0cdd0af59f278be0808fa' }, index.h("h2", { key: '0cde0c59c478d9793c78277783ddca18a2c46dd6' }, "Theme"), index.h("smoothly-theme-picker", { key: 'cb06e7228d22bfc7fa5231b38ccb5bd281026751' }, index.h("smoothly-item", { key: '37a46c34ec4767c282487d34c0178ac96d4f0a27', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '961b69baea8b3760c095834bd8604d93ae1e3c74', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '23989e21f124308a39da7e657726916184e5ab72', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '93ffa3949d02f68f7a7dfa5f79b351a8eb8b7f56', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '98bc1c21a725ae552e75e7133b32406c15c21c5b', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '73481eca7b2759efa8ed022eda4d9ff4388e8068', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: '9402ca492b8d2f7671bd6134f4bc89d0ea2da416', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: '6e1e73a3d57216f482d5dc2d8054374c0501b33d', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '71d27357073891f1bb129289464955dc85458e96', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("span", { key: 'abf005c54cf96f66cedbe5a407b6bcb6c9362c34' }, index.h("smoothly-theme-colors", { key: '9efd5049331fcf93907122e74a3ab0c82bc67aa2' }), index.h("smoothly-theme-guide", { key: '60e3b296b89f628e3e0f180c450f7186e5295286' })), index.h("smoothly-button", { key: '0bbc0d57c16f3171172f4cc5a1b5f6d2ebc9d9c6', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '5f52fb18a8c0ceb9b8fc280e04adbb838a8a41b2', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: 'faf14655d01668c8cebec6968bb4d0b67c2bc4f1', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '763387d9b3f7960b6dc0a69031296a23ef793f77', type: "link", link: "redirect/nested" }, "To redirect nested")));
+        return (index.h(index.Host, { key: 'f3a9bce2ea9ea921ddc0cdd0af59f278be0808fa' }, index.h("h2", { key: '0cde0c59c478d9793c78277783ddca18a2c46dd6' }, "Theme"), index.h("smoothly-theme-picker", { key: 'cb06e7228d22bfc7fa5231b38ccb5bd281026751' }, index.h("smoothly-item", { key: '37a46c34ec4767c282487d34c0178ac96d4f0a27', selected: true, value: "assets/style/smoothly.css" }, "Smoothly"), index.h("smoothly-item", { key: '961b69baea8b3760c095834bd8604d93ae1e3c74', value: "https://app.issuefab.com/assets/style/index.css" }, "Issuefab"), index.h("smoothly-item", { key: '23989e21f124308a39da7e657726916184e5ab72', value: "https://app.proquse.com/assets/style/index.css" }, "Proquse"), index.h("smoothly-item", { key: '93ffa3949d02f68f7a7dfa5f79b351a8eb8b7f56', value: "https://app.weekmeter.com/assets/style/index.css" }, "Weekmeter"), index.h("smoothly-item", { key: '98bc1c21a725ae552e75e7133b32406c15c21c5b', value: "https://dash.pax2pay.app/p2pdash.css" }, "Pax2Pay Dashboard"), index.h("smoothly-item", { key: '73481eca7b2759efa8ed022eda4d9ff4388e8068', value: "https://ui.pax2pay.app/assets/style/pax2pay.css" }, "Pax2Pay Portal"), index.h("smoothly-item", { key: '9402ca492b8d2f7671bd6134f4bc89d0ea2da416', value: "https://theme.payfunc.com/intergiro/index.css" }, "Intergiro Monitor"), index.h("smoothly-item", { key: '6e1e73a3d57216f482d5dc2d8054374c0501b33d', value: "https://theme.payfunc.com/light/index.css" }, "Payfunc Light"), index.h("smoothly-item", { key: '71d27357073891f1bb129289464955dc85458e96', value: "https://theme.payfunc.com/dark/index.css" }, "Payfunc Dark")), index.h("div", { key: '15d5aab8433956d0a159c42cd702607c6df2cda7' }, index.h("smoothly-theme-colors", { key: '77b4c95e2e8761a9703601c3a890342a791559a3' }), index.h("smoothly-theme-guide", { key: 'ff190b0fba8f600ad5774743b287088e519cb28f' })), index.h("smoothly-button", { key: 'd75520d40a986fe09897fd50e0244d039ceca933', type: "link", link: "/redirect" }, "To redirect"), index.h("smoothly-button", { key: '6db6194c220c2906ee8a5f3d5ed9b9e97d7ff9ec', type: "link", link: "/redirect" }, "To /redirect"), index.h("smoothly-button", { key: 'a0f9cba373c1a31ee5997a64f07dfa84e82f273e', type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), index.h("smoothly-button", { key: '26987f874341cebb9742beeff94e830ab569dd2c', type: "link", link: "redirect/nested" }, "To redirect nested")));
     }
 };
 SmoothlyThemeDemo.style = SmoothlyThemeDemoStyle0;
 
-const styleCss$4 = "";
+const styleCss$4 = ".sc-smoothly-theme-guide-h{max-width:50ch}";
 const SmoothlyThemeGuideStyle0 = styleCss$4;
 
 const SmoothlyThemeColors = class {