npm - smoothly - Versions diffs - 1.1.1-alpha.40 → 1.1.1-alpha.42 - Mend

smoothly 1.1.1-alpha.40 → 1.1.1-alpha.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/dist/cjs/smoothly-app_99.cjs.entry.js CHANGED Viewed

@@ -2249,7 +2249,7 @@ function parse$3(value, type, ...argument) {
     return handler ? handler.fromString(handler.unformat(StateEditor.modify(value)).value) : undefined;
 }
-class Handler$h {
+class Handler$i {
     toString(data) {
         return typeof data == "string" ? data : "";
     }
@@ -2266,9 +2266,9 @@ class Handler$h {
         return state.value.length < 3 && symbol >= "0" && symbol <= "9";
     }
 }
-add$5("card-csc", () => new Handler$h());
+add$5("card-csc", () => new Handler$i());
-class Handler$g {
+class Handler$h {
     toString(data) {
         return Array.isArray(data) && data.length == 2 && typeof data[0] == "number" && typeof data[1] == "number"
             ? data[0].toString().padStart(2, "0") + data[1].toString().padStart(2, "0")
@@ -2294,9 +2294,9 @@ class Handler$g {
         return state.value.length < 4 && symbol >= "0" && symbol <= "9";
     }
 }
-add$5("card-expires", () => new Handler$g());
+add$5("card-expires", () => new Handler$h());
-class Handler$f {
+class Handler$g {
     toString(data) {
         return typeof data == "string" ? data : "";
     }
@@ -2323,7 +2323,7 @@ class Handler$f {
         return symbol >= "0" && symbol <= "9" && state.value.length < issuer.length[0];
     }
 }
-add$5("card-number", () => new Handler$f());
+add$5("card-number", () => new Handler$g());
 function getIssuer(value) {
     let result = defaultIssuer;
     for (const key in issuers)
@@ -2495,7 +2495,7 @@ add$5("date", (parameters) => {
     return create();
 });
-class Handler$e extends Base$1 {
+class Handler$f extends Base$1 {
     constructor(separator) {
         super(separator);
     }
@@ -2543,11 +2543,11 @@ class Handler$e extends Base$1 {
                             : state.selection.start < 8 && symbol >= "0" && symbol <= "9";
     }
 }
-register("dd.mm.YYYY", () => new Handler$e("."));
-register("dd/mm/YYYY", () => new Handler$e("/"));
-register("dd-mm-YYYY", () => new Handler$e("-"));
+register("dd.mm.YYYY", () => new Handler$f("."));
+register("dd/mm/YYYY", () => new Handler$f("/"));
+register("dd-mm-YYYY", () => new Handler$f("-"));
-class Handler$d extends Base$1 {
+class Handler$e extends Base$1 {
     constructor(separator) {
         super(separator);
     }
@@ -2592,9 +2592,9 @@ class Handler$d extends Base$1 {
         return result;
     }
 }
-register("mm/dd/YYYY", () => new Handler$d("/"));
+register("mm/dd/YYYY", () => new Handler$e("/"));
-class Handler$c extends Base$1 {
+class Handler$d extends Base$1 {
     constructor(separator) {
         super(separator);
     }
@@ -2643,9 +2643,9 @@ class Handler$c extends Base$1 {
                         : state.selection.start < 8 && symbol >= "0" && symbol <= "9";
     }
 }
-register("YYYY-mm-dd", () => new Handler$c("-"));
+register("YYYY-mm-dd", () => new Handler$d("-"));
-class Handler$b {
+class Handler$c {
     toString(data) {
         return typeof data == "string" ? data : "";
     }
@@ -2698,7 +2698,7 @@ class Handler$b {
             ((symbol >= "0" && symbol <= "9") || symbol == "-" || symbol == ":" || symbol == "." || symbol == " "));
     }
 }
-add$5("date-time", () => new Handler$b());
+add$5("date-time", () => new Handler$c());
 function formatDate(unformatted, format) {
     let result = unformatted;
     switch (format) {
@@ -2795,7 +2795,7 @@ function daysPerMonth(year, month) {
     return result;
 }
-class Handler$a {
+class Handler$b {
     toString(data) {
         return Array.isArray(data) && data.length == 2 && typeof data[0] == "number" && typeof data[1] == "number"
             ? data[0].toString() + " / " + data[1].toString()
@@ -2851,9 +2851,9 @@ class Handler$a {
         return state.value.length < 7 && ((symbol >= "0" && symbol <= "9") || symbol == "/" || symbol == " ");
     }
 }
-add$5("divisor", () => new Handler$a());
+add$5("divisor", () => new Handler$b());
-class Handler$9 {
+class Handler$a {
     constructor() {
         this.separator = ":";
         this.patterns = {
@@ -2935,7 +2935,31 @@ class Handler$9 {
         return !!nextValue.match(this.patterns.allowed);
     }
 }
-add$5("duration", () => new Handler$9());
+add$5("duration", () => new Handler$a());
+class Handler$9 {
+    constructor(settings) {
+        this.settings = settings;
+    }
+    toString(data) {
+        return typeof data == "string" ? data : "";
+    }
+    fromString(value) {
+        return typeof value == "string" && !!value ? value : undefined;
+    }
+    format(unformatted) {
+        return { ...unformatted, ...this.settings, type: "email", autocomplete: "email" };
+    }
+    unformat(formatted) {
+        return formatted;
+    }
+    allowed(symbol, state) {
+        return (this.settings.length == undefined ||
+            this.settings.length[1] == undefined ||
+            state.value.length < this.settings.length[1]);
+    }
+}
+add$5("email", (settings) => new Handler$9(settings || {}));
 class Handler$8 {
     constructor(settings, mode) {
@@ -3607,7 +3631,6 @@ class Handler {
     }
 }
 add$5("text", (settings) => new Handler(settings || {}));
-add$5("email", (settings) => new Handler(settings || {}));
 const styleCss$1j = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
 const SmoothlyDisplayStyle0 = styleCss$1j;
@@ -8891,14 +8914,15 @@ const SmoothlyInput = class {
                 backend.selectionStart = after.selection.start;
             if (backend.selectionEnd != undefined && after.selection.end != backend.selectionEnd)
                 backend.selectionEnd = after.selection.end;
-            backend.selectionDirection = (_a = after.selection.direction) !== null && _a !== void 0 ? _a : backend.selectionDirection;
+            if (backend.selectionDirection != null)
+                backend.selectionDirection = (_a = after.selection.direction) !== null && _a !== void 0 ? _a : backend.selectionDirection;
         }
         this.state = after;
         this.value = this.lastValue = this.formatter.fromString(this.formatter.unformat(StateEditor.copy(Object.assign({}, this.state))).value);
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (index.h(index.Host, { key: 'c3e2c2a789b8c6e4fd2e49ad723daa8a3eaaf424', 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: 'f5afe85b97a5ae8cc6c5ecc0d32343f770d63662', name: "start" }), index.h("div", { key: '8a9e3627a3b0ae10c52730e507414dd5c2a8c5bc' }, index.h("input", { key: 'b8eb593549fad15b4fa6a436b6bc8240b9752e0d', color: this.color, name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, readOnly: this.readonly, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("label", { key: 'e62abd24018715dc421acbaea2f15846bc35ef1b', htmlFor: this.name }, index.h("slot", { key: 'a4f9f60dc812ec6866971d483d0c06ffe86c51cf' })), index.h("smoothly-icon", { key: '353d5b95ffb2275c31c6e9f4b1beb2de10d6a53a', name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '69f226920cca425af3082420feae09f0f3c66eff', name: "end" })));
+        return (index.h(index.Host, { key: '7fc18dda76d05c48503a696336eea53bf51ad330', 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: 'cbadfb4c4bb5ce83aa04480713301e5d348f723b', name: "start" }), index.h("div", { key: 'bd8edf34a09a62280268c393e4f80abdc5688988' }, index.h("input", { key: '15602616e5affeddd5c779dda82277afd10f787c', color: this.color, name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, readOnly: this.readonly, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("label", { key: '499f41b9be5969366d202156aa82392dce4d6c3a', htmlFor: this.name }, index.h("slot", { key: 'b87741586e57a133bd710fca0f381b6c02545942' })), index.h("smoothly-icon", { key: 'dc98722a8ab97564080b963505889777cc662610', name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '13e852014e28edfb65fbc6e989b05e76f100a1c8', name: "end" })));
     }
     static get watchers() { return {
         "type": ["typeChange"],
@@ -9214,19 +9238,19 @@ const SmoothlyInputDemo = class {
                 const duration = e.detail.duration;
                 console.log("event duration", duration);
                 this.duration = duration;
-            } }, "Duration")), index.h("h2", { key: '2da489cb64d5d0c6d9b64622a1d29278b197a140' }, "Transparent inputs"), index.h("smoothly-form", { key: 'bc7a58e0efdcac8a1dfdfb68fd7b94ac9c2bf7b5', looks: "transparent" }, index.h("smoothly-input-file", { key: 'cb12061b209cc11a8493c97096ed1c2a4a91f544', name: "file" }, index.h("span", { key: '8ef2c2bdd60e444b399728192fb178e63f6349e8', slot: "label" }, "File"), index.h("smoothly-icon", { key: '0cdb90d1013723ea11632faa3bf2380f7c3012a5', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '3d81af7c3c772fdd2bfbcac51887a941316c0052', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-picker", { key: 'de9c9bf5340c68a06bf8de43dfdd1e8aaaf7f604' }, index.h("span", { key: 'a10fcc0d29361ca86138d28774872d42fd638734', slot: "label" }, "Picker"), index.h("span", { key: 'c6eea717a5f86b2be766bcdf67bdbb964d4784f1', slot: "search" }, "Search"), index.h("smoothly-picker-option", { key: 'c342b5e6e19f9c9b4ab52ed4a5599e54ac297ec4', value: "circle" }, index.h("smoothly-icon", { key: '97eabac0363c564ce771d44c68d1902ba7bb7e72', name: "ellipse-outline" })), index.h("smoothly-picker-option", { key: '40484ce2de0c499b32946c21d76225f8e63218fa', value: "square" }, index.h("smoothly-icon", { key: 'ca43b5b32971bf72f0858e37bbed43214d7ea021', name: "square-outline" }))), index.h("smoothly-input-date", { key: 'b56196278965538ebb06e857b102ea7cf8bd1f54' }, "Date"), index.h("smoothly-input-date-range", { key: 'bc404e9a32e70f3da7a09dc6e8b709a67ac985f8' }, "Date Range"), index.h("smoothly-input-select", { key: '15fb703ed038e1c757a7b621e2fad027afbe5c19', name: "transport" }, index.h("smoothly-item", { key: '57e80c1292c64e7e7c3e809be896148c5c776948', value: "plane" }, index.h("smoothly-icon", { key: '95586982203aad9ee3672c555314d20aa68f1ddb', name: "airplane-outline" })), index.h("smoothly-item", { key: 'cc286a5ee53d8e1d59395ec4fb03847692fde69d', value: "car" }, index.h("smoothly-icon", { key: 'c70296f0b0dd40660c773ebc19fd805584933046', name: "car-outline" })), index.h("smoothly-item", { key: 'e40d8ed4e6280cf20c45ae489d0d36b271ed1d26', value: "bus", selected: true }, index.h("smoothly-icon", { key: '33f5a21d98fffc77746fc3e702a1e2ae4404c3f8', name: "bus-outline" })))), index.h("h2", { key: '2ef0e15a21055edadf2295eaea228a49ad4d33fc' }, "Submit"), index.h("smoothly-form", { key: '616365b9a4ec59db51987cad7d113ab6af9c1b69', looks: "border" }, index.h("smoothly-input", { key: '005b4810d654e19736957d13aebeeed5a2c24b07', type: "email", name: "email" }, "Email"), index.h("smoothly-input", { key: 'd0723017e7e7db06254ceb1aa6dbc3e6088f0039', type: "password", name: "password" }, "Password"), index.h("smoothly-input-clear", { key: 'ffadfe6877deb41c750c025671bd894964cf4bcc', fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), index.h("smoothly-submit", { key: '11993a31432f593896a651828b141de0fef08890', slot: "submit" }, "Submit")), index.h("h2", { key: 'bd98ea5f29720bedf67f2b109d80bbe9fd41d2c5' }, "Prices"), index.h("smoothly-form", { key: 'b7ecb560d43f519eeaef3a0dd895bdab1de6a030', looks: "border" }, index.h("smoothly-input", { key: 'cc2db2794260e3b77e506fff82be204dae02c4fa', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: 'ebb42c4b7f67143b7af9abf3599cd11927a4a248', type: "price", name: "crowns", currency: "SEK" }, "SEK"), index.h("smoothly-input", { key: 'fd54b7a51db17fa8850c020392dd581ed55b2a63', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: '9208419a7213c10f8602eb4120772c62add3d8f6', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: 'cf5c52eb27b72b5e35cff612106ae44ef95a6cdd', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: 'deac0ed914222198b899b074f89ed65e97132e9f', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: '34c8d7a834a34b220e4ba692a183895d7421561e', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-clear", { key: '2b81c40340833ce18153a6b3bfae20380a2139c8', fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), index.h("smoothly-submit", { key: 'cbbc833200d3592a2760fad143cf15eb0a82e8f4', slot: "submit" }, "Submit")), index.h("h4", { key: '76386e8593e8cb2710a53fe43ed8292e6a08655c' }, "Clear"), index.h("smoothly-form", { key: 'd10e7975c084bc33b62c52d82b379d8bbfe4a08a', looks: "border" }, index.h("smoothly-input", { key: '5ba26b96b8a5468549e134947d22cb6d9316b073', name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '084485076c80c69c715fd11001b3b83d0b1b8c94', name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: '336956ebf5e05bd1253ffd362c2ae9ba0f830171', size: "icon", slot: "end" }, index.h("smoothly-icon", { key: 'b726f2aff18958189787e1373558881c39f11af2', name: "close" }))), index.h("smoothly-input", { key: '1756087f3e3106c97e420d24e0261bc10da74c4e', type: "phone", name: "Phone" }, "Phone", index.h("smoothly-input-clear", { key: 'ca4db4fcf15495ef59d48166dbbbd7de059fa5ac', slot: "end" }, index.h("smoothly-icon", { key: 'b3d07ffb4f84ceeee11e4779783bbb67660c0d3d', name: "close" }))), index.h("smoothly-input-clear", { key: '59458a923e2fb09646d4ed0a091c707d46e76bab', fill: "default", type: "form", color: "danger", slot: "submit" }, "Clear")), index.h("h2", { key: '84e0ee3ef7b766edcfface2f68e7d6bdfc375356' }, "Identifier"), index.h("smoothly-form", { key: '0cb9c35dcfd173be37137a3c35cc816fb6835814', looks: "border" }, index.h("smoothly-input", { key: '171a5e9cc0d54fcd2bd958efae49846e0a0a5a56', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: '03f9e8c382bf71a4e7069bcb4296d9c4e516bc6c', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '1c180c944371842f1640212b268ebd88f0eb7178', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: 'b3e92935b5e7a847638547481b55fc52ade1244e', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: '1aa57ca320ac4f3052c7be29b24ade2f0d3dfc2f', type: "identifier-camel" }, "Camel")), index.h("h2", { key: 'e22bfa42da1d374096a08a8aeb930301a46f6e82' }, "Border"), index.h("smoothly-form", { key: 'd543243b2cd8ff7394b5630b7cfced00492ce846', looks: "border" }, index.h("smoothly-input", { key: '3967145fe0943767c0a4c8a1c07d4ee551e2dd3f', type: "email", name: "email" }, "Email"), index.h("smoothly-input", { key: '88f4fea32762ee492829c3e0ef3a1917aef41102', type: "password", name: "password" }, "Password"), index.h("smoothly-submit", { key: '0502af3aea7ca43acfbc6d29ee99262f96594890', slot: "submit", onSubmit: (e) => alert(e), color: "success", fill: "solid" }, "Send")), index.h("h2", { key: '6d26be436168ee64cef5603503cb655980e2ba66' }, "Grid"), index.h("h4", { key: 'f66183e7573cc859205f66e3f9e53017e97f7f74' }, "Contact"), index.h("smoothly-form", { key: '4b0bd9db38982a186d0dc76ed4a445dae79f63ad', looks: "grid", action: "https://webhook.site/85bb78f6-b450-4a74-81ac-d7cac6e94bbe" }, index.h("smoothly-input", { key: '625a6415c13711e660ee1f1611807bbd38e8cd0f', type: "text", name: "name.last" }, "First Name"), index.h("smoothly-input", { key: '4186d02578b76c076362eea02762cee0c968c22a', type: "text", name: "name.first" }, "Last Name"), index.h("smoothly-input", { key: 'f37b7bd7f2a73e768c05060d32da5b3790a32af7', type: "text", name: "street", value: "Torgny Segerstedts All\u00E9 87" }, "Street"), index.h("smoothly-input", { key: 'a7d90d24d323147df0e03e73c5a327d0664f22f9', type: "postal-code", name: "zip" }, "ZipCode"), index.h("smoothly-input", { key: '88721d22ccbf82485326aa3922d7d316f78d052d', type: "text", name: "city" }, "City"), index.h("smoothly-input", { key: '765ec0a2c40a144e49031354fc11ea0d21fdb467', type: "text", name: "countryCode" }, "CountryCode"), index.h("smoothly-input", { key: '6c86bf98b2be7d742d0f9223cdc4ce418261c4e1', type: "phone", name: "phone" }, "Phone"), index.h("smoothly-input", { key: 'ff6955808c19fd248304b0011d01af56434049fc', type: "email", name: "email" }, "Email"), index.h("smoothly-submit", { key: '716fc7c5996d983d1a9cdf0e25ecac25552393c0', slot: "submit", color: "success", fill: "solid" }, index.h("smoothly-icon", { key: '9bf116bfc8aa00d5d7984b5f56ae82ed85851c24', name: "checkmark-circle", slot: "start" }), "Submit")), index.h("h4", { key: '46bcc9930908e72a941954314300a989269cbbae' }, "Card"), index.h("smoothly-form", { key: '96f2ce0a4c690ade404f85bb34392e98a1b9b875', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: 'e08f9dcd8fffd8e9898ec07ac0ec9a6280bfa881', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-submit", { key: '35bfcf5f18d77c7506f1f7751c85d793aeb083b4', size: "icon", slot: "submit", color: "success", fill: "solid" }, index.h("smoothly-icon", { key: '66e563f0bf1a5e985a8e626fabbf3cf15ca48481', name: "checkmark-circle" })), index.h("smoothly-input", { key: '2426d8c6702eec02a82897ab0a3dbbd580834aef', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: 'b177ac5388c0762c27e84fc448176e62fea597c0', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: '7e401def07e838f071c5aad532777a5e639387a8', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: 'a24e089e03b2d93cbc695005ec33f6a6660da74b', type: "text", name: "name.last" }, "Last Name")), index.h("h4", { key: 'b9296b2b4b84d0aadb7c65ffddd93ad7899897a0' }, "Contact"), index.h("smoothly-form", { key: '430058f36f91da83155bda600364bff711f47497', looks: "grid" }, index.h("smoothly-input", { key: 'ba6099f39bcfd7fab6c86ccdc4e764cf392f86e6', type: "email", name: "email" }, "Email"), index.h("smoothly-input", { key: '87bc3ee50f1aecdc78f354c654f06998a2a86ced', type: "password", name: "password" }, "Password"), index.h("smoothly-input", { key: '49c215b388bc93eac8e9787988d163d290bc4289', type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { key: '4e9e282e4eab08ef0e9924e1ae35bc8a5cd1dfa9', type: "percent", name: "percent" }, "Percent"), index.h("smoothly-submit", { key: 'cb37f0b58b6042314389050d53cc57a5712a0526', slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { key: 'd5583433e5f9ee611766527c79b8d2d02621cd48', name: "checkmark-circle" }))), index.h("h4", { key: '92a3d2424804bfcd90d01504c87df6e8a76ed1a0' }, "Random"), index.h("smoothly-form", { key: '6284ec26d6853470575962044de34deb17b7f14e', looks: "grid" }, index.h("smoothly-input", { key: 'bb9c5871134e85f64f1a4721a8d204ab4d98dd96', type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur"), style: { width: "100%" } }, "Readonly"), index.h("smoothly-input", { key: '56a3a2020aa4c76d68ece8d7df808b4d8acf5c84', type: "text", name: "testing" }, "TextTest"), index.h("smoothly-input", { key: 'ec7ce6f64e4786f481ec8f7a8faae5d257f9adc8', type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { key: 'f2d0f056a8227f0d5ce98c7906e138b56772fbce', type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { key: '15622b8534f9bf26e35bcafc3569aa0c5a8c4b1a', type: "date", name: "date" }, "Date"), index.h("smoothly-input-date", { key: 'ef845de6ad482b15f07fab0891a803beb3c5c399', name: "some-date" }, "Calendar")), index.h("h2", { key: '797a631803cd421820cfe5b455598886f16bf10c' }, "Line"), index.h("smoothly-form", { key: '343f22898add33f4976a11c0e4a2b7b8cbe406f6', looks: "line", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { key: 'f542498aca1dd9e030d091bce9bfb2e827e50455', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "First Name"), index.h("smoothly-input", { key: '44da7700fbb0f5bdf97947fdeeabb59a13b270fc', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name"), index.h("smoothly-submit", { key: 'db833ccb71d1a36eed8c8156dabd6f76525a52d1', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), index.h("h2", { key: 'e534e9a6470270f40fdd71561854bf3947278caf' }, "Input Alternatives"), index.h("smoothly-form", { key: '5d794ec551901079b12e4dcd409f4015c2e94dd2', looks: "border" }, index.h("smoothly-input", { key: '49b823da1f8da077b8f5801ac8ccc8e9a1054828', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: 'c6dce1dbf05da0318c5704fe80770965015edf1e', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '802d405d241ea6385997978222bb798dc8bf49c1', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '141515c6fc3e2333c52f72d11e4f8689c8b26472', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '6a1a1548f9f3bec7b1408502bd4392454444a80a', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: 'd2167106949150dabecdc4db62722c086b89baf9', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '02a00d5dbf0bde3e04e8a5ead59aa1b67daf81c2', placeholder: "test" }), index.h("smoothly-submit", { key: '8875423aba089b950e1384c13933919103fd10b0', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), index.h("h4", { key: '1c4350fc6cef4222d6565c20aa51393067a5b872' }, "Smoothly checkboxes"), index.h("smoothly-form", { key: '7f422e17d963bf298fa368ea8cf8b1da31cb42e1' }, index.h("div", { key: 'e2a7d5be8dc33aff8334365bbd0155281dd3b43f', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: '4d6ae188ee019a9973820fc0e269ee0d8ea83969', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: '3b1c9d1e44f06473f0cdb514005e8037011840fe', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: '8a10d8f68b577147c72fe14d3492ba80e198791b', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: 'd183ed3f674425247e3a4dda56a4e93831a44545', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '296e8be81e3187c02fde700f856e6f22e625f9b2', size: "icon", slot: "end" }, index.h("smoothly-icon", { key: '4fd931e904dff8aeaf55be00fbebd715f0b8eef8', name: "close" }))), index.h("smoothly-input-checkbox", { key: '328ae7c055390e791f1b46651432f36bfbfe4b49', name: "third-checkbox" }, "3rd"))), index.h("h4", { key: '3450bbc31835fafac155c485bf50c1a5ce1fac48' }, "Smoothly Radio Buttons"), index.h("smoothly-form", { key: 'e131959b022f138d8b0cdece5f03eece8fc44520', onSmoothlyFormSubmit: e => console.log(e.detail), looks: "border" }, index.h("smoothly-input-radio", { key: '201896165a215e89ee66cca7b533e9482ddb3e39', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: 'b36974780b417bf6ccd5aede627c410421be73dc', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: 'ea0d470cb2aea5f3eaf0c97998fc15c13ab28e18', size: "icon", slot: "end" }, index.h("smoothly-icon", { key: 'c6a56e21065bd52233d6776b3cad5a2ebfe976bb', name: "close" })), index.h("p", { key: '089f0a37e517d132bd088b11e5093ad8280bca55', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '2ef449623563947d73356400a93f439faacdd9e7', slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'a762ee68163dbcd36a4483644e65111f28c483e9', selected: true, slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '94e7a5f4aff11dafc4973683b99841838d6d3c21', slot: "options", value: "third" }, "Label 3")), index.h("smoothly-input-radio", { key: 'b86a9decf3766c0a21e5942324bc02d4f6ad8029', name: "radioSecondInput" }, index.h("p", { key: '0325b2331201d3cae72cf86d7802af61b61e8161', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: '7da23d87cf160510866c57aa3f55dbb43d16762c', slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '66d3bfb746fd08b2b07c05e00e354ce0344b72d8', slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: 'be83b23a527b5e4d0db1c2b8b4f81f0627f93817', slot: "options", value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '19cdd4e97197f5c483a1da5313f924fb8fbb3686', slot: "options", value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: '6c6ff715a9b2e58a49e082beca988da645324f8d', slot: "options", value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: '96f5f35978387e2e473eed3ae1149bf6544dc543', slot: "options", value: "sixth" }, "Label 6"))), index.h("h4", { key: '05823965c7caaa73141241fda7ef0df9c403394b' }, "Smoothly Picker"), index.h("smoothly-picker-demo", { key: 'c3f755e717839209177fa1ea44cde15422a56bc5' }), index.h("smoothly-back-to-top", { key: '7ca3126b59922e35fd6c9ed49270e38fac11420f' }), index.h("h4", { key: 'e17e594a524367bce4c064bc6fc83134866cda23' }, "Smoothly Date"), index.h("smoothly-input-date", { key: '808034d1205c07383817174925c049f3327d733c' }, "Date"), index.h("smoothly-input-date", { key: 'b0582ba9d84d90c15ea5e58423759441664947c7', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-form", { key: '617ec2105feed5faf66d8c3ffd1e865b6a315b5c', looks: "grid", onSmoothlyFormSubmit: e => console.log(e.detail) }, index.h("smoothly-input-date-range", { key: '1a399b1b3bfaf53e0f498c823a316056a20b34aa', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }), index.h("smoothly-input-clear", { key: '0508d01cb63ebd22dca907ece84aaea5a0c2b36f', type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), index.h("smoothly-submit", { key: 'ffd841a9cfee05fad37a20cd24709732a7e461ea', slot: "submit" }, "submit daterange")), index.h("smoothly-input-date-range", { key: '6976a1b5f6160eeddc56c19e89fdaafa00b6c4cb', looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+            } }, "Duration")), index.h("h2", { key: '2da489cb64d5d0c6d9b64622a1d29278b197a140' }, "Transparent inputs"), index.h("smoothly-form", { key: 'bc7a58e0efdcac8a1dfdfb68fd7b94ac9c2bf7b5', looks: "transparent" }, index.h("smoothly-input-file", { key: 'cb12061b209cc11a8493c97096ed1c2a4a91f544', name: "file" }, index.h("span", { key: '8ef2c2bdd60e444b399728192fb178e63f6349e8', slot: "label" }, "File"), index.h("smoothly-icon", { key: '0cdb90d1013723ea11632faa3bf2380f7c3012a5', slot: "button", name: "folder-open-outline", size: "small" })), index.h("smoothly-input", { key: '3d81af7c3c772fdd2bfbcac51887a941316c0052', type: "duration", looks: "transparent", placeholder: "h:mm" }, "Input"), index.h("smoothly-picker", { key: 'de9c9bf5340c68a06bf8de43dfdd1e8aaaf7f604' }, index.h("span", { key: 'a10fcc0d29361ca86138d28774872d42fd638734', slot: "label" }, "Picker"), index.h("span", { key: 'c6eea717a5f86b2be766bcdf67bdbb964d4784f1', slot: "search" }, "Search"), index.h("smoothly-picker-option", { key: 'c342b5e6e19f9c9b4ab52ed4a5599e54ac297ec4', value: "circle" }, index.h("smoothly-icon", { key: '97eabac0363c564ce771d44c68d1902ba7bb7e72', name: "ellipse-outline" })), index.h("smoothly-picker-option", { key: '40484ce2de0c499b32946c21d76225f8e63218fa', value: "square" }, index.h("smoothly-icon", { key: 'ca43b5b32971bf72f0858e37bbed43214d7ea021', name: "square-outline" }))), index.h("smoothly-input-date", { key: 'b56196278965538ebb06e857b102ea7cf8bd1f54' }, "Date"), index.h("smoothly-input-date-range", { key: 'bc404e9a32e70f3da7a09dc6e8b709a67ac985f8' }, "Date Range"), index.h("smoothly-input-select", { key: '15fb703ed038e1c757a7b621e2fad027afbe5c19', name: "transport" }, index.h("smoothly-item", { key: '57e80c1292c64e7e7c3e809be896148c5c776948', value: "plane" }, index.h("smoothly-icon", { key: '95586982203aad9ee3672c555314d20aa68f1ddb', name: "airplane-outline" })), index.h("smoothly-item", { key: 'cc286a5ee53d8e1d59395ec4fb03847692fde69d', value: "car" }, index.h("smoothly-icon", { key: 'c70296f0b0dd40660c773ebc19fd805584933046', name: "car-outline" })), index.h("smoothly-item", { key: 'e40d8ed4e6280cf20c45ae489d0d36b271ed1d26', value: "bus", selected: true }, index.h("smoothly-icon", { key: '33f5a21d98fffc77746fc3e702a1e2ae4404c3f8', name: "bus-outline" })))), index.h("h2", { key: '2ef0e15a21055edadf2295eaea228a49ad4d33fc' }, "Submit"), index.h("smoothly-form", { key: '616365b9a4ec59db51987cad7d113ab6af9c1b69', looks: "border" }, index.h("smoothly-input", { key: 'e7f078c1bc0eb4f3e5de1d5e52854808063a9953', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '820d0177e647592048d1aa688285c2fee75788a2', type: "password", name: "password" }, "Password"), index.h("smoothly-input-clear", { key: '436e5d364b689abbb4054fe5968a932f39685f36', fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), index.h("smoothly-submit", { key: '0debb4329f3aca3a3d699bbe99bd3003826163cf', slot: "submit" }, "Submit")), index.h("h2", { key: 'b3e2dc2912ba7f04021b4d50813191fc74ee16b0' }, "Prices"), index.h("smoothly-form", { key: '0543c59373d9be7c9ceac945c928252f2a6e9753', looks: "border" }, index.h("smoothly-input", { key: '54b6ce8ca4f47c43342f14913c91f9f76af4f988', type: "price", name: "no" }, "No currency"), index.h("smoothly-input", { key: 'ceaebc16a13089e1451f7170b1112e78b59379b4', type: "price", name: "crowns", currency: "SEK" }, "SEK"), index.h("smoothly-input", { key: '83ba43fd7e00e24fc77baa36a178b1e1dbebb46e', type: "price", name: "usDollar", currency: "USD" }, "USD"), index.h("smoothly-input", { key: 'fcae67b799b3d927f6b18f9178cc9d26e066749e', type: "price", name: "pounds", currency: "GBP" }, "GBP"), index.h("smoothly-input", { key: '759ad25117d4e85eeefc1ee060fb42f4b4cb2dcb', type: "price", name: "peso", currency: "UYW" }, "UYW"), index.h("smoothly-input", { key: '30f02bd763a116b3822c5e42d731be55ff82273e', type: "price", name: "iceland", currency: "ISK" }, "ISK"), index.h("smoothly-input", { key: 'f49967c0ed391e6cdd0dcde964dad68ee11df333', type: "price", name: "Palladium", currency: "XPD" }, "XPD (Palladium)"), index.h("smoothly-input-clear", { key: '893955ffac74895ad43dc8b95a3e4379e7695f87', fill: "default", type: "form", color: "danger", slot: "clear" }, "Clear"), index.h("smoothly-submit", { key: 'ddbbceea1b1d36e314e6ed896bc8be116b916362', slot: "submit" }, "Submit")), index.h("h4", { key: '1f0a37075c6f1426909fbafb3b38289081167c77' }, "Clear"), index.h("smoothly-form", { key: 'a49785673a2e00abd4f8b47b45bf80add0d86ca6', looks: "border" }, index.h("smoothly-input", { key: '72dc083f3d5d269eaf0abf101d253b6f8101b386', name: "First Name", value: "John" }, "First name"), index.h("smoothly-input", { key: '4817d326e75b28bc2a5b19b588ef473c231984d4', name: "Last name", value: "Doe" }, "Last name", index.h("smoothly-input-clear", { key: 'c5518efb682f17aa70a29ddd40c583bc7b50f617', size: "icon", slot: "end" }, index.h("smoothly-icon", { key: 'be4ca3c8aa33ef6175d8855fba7f5f2ec59dcc43', name: "close" }))), index.h("smoothly-input", { key: '612ee549e6bab26b0b543ed2ffb5144d0a89be20', type: "phone", name: "Phone" }, "Phone", index.h("smoothly-input-clear", { key: '573da3bc440514a05eb6fe1e4121cd9af73cbc1b', slot: "end" }, index.h("smoothly-icon", { key: 'cf864483ef4e1a6af5f7a55d23f41e438ac84f2e', name: "close" }))), index.h("smoothly-input-clear", { key: 'b57da821bd6651e1f3edeef39e83e16b356e6fcd', fill: "default", type: "form", color: "danger", slot: "submit" }, "Clear")), index.h("h2", { key: 'eba1000e5b4427a4bf82215236c1b7a65bc8715d' }, "Identifier"), index.h("smoothly-form", { key: '364cc9218e1303b7851e4c0459e02833377cfb13', looks: "border" }, index.h("smoothly-input", { key: '295b77e19d80bdd49f5d62e0439acfc7705b97e3', type: "identifier-code" }, "Code"), index.h("smoothly-input", { key: 'f9e20384a154b00724f772d784ab99807e33e2a4', type: "identifier-attribute" }, "Attribute"), index.h("smoothly-input", { key: '3cab1657486435dda4232d6cbde35e484f43e42c', type: "identifier-snake" }, "Snake"), index.h("smoothly-input", { key: 'f0aad2869df642e7e662d34896108706c165377a', type: "identifier-pascal" }, "Pascal"), index.h("smoothly-input", { key: '25da056f8ba2630cd7e1d00b453f71b2401777b6', type: "identifier-camel" }, "Camel")), index.h("h2", { key: '77767410940fdeba8bf01b732ee5ebef7112d06a' }, "Border"), index.h("smoothly-form", { key: '14daff91e895b7a22498d60075beff75ca268132', looks: "border" }, index.h("smoothly-input", { key: 'eb0b83a694bcb0cc115b31bbbf1ef0c006dfbc3d', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: 'ee588772d332169ceb645b8411c06c73b54eea45', type: "password", name: "password" }, "Password"), index.h("smoothly-submit", { key: '1b0e66d107cf21a0bd7b5cbeba623374bf859d0b', slot: "submit", onSubmit: (e) => alert(e), color: "success", fill: "solid" }, "Send")), index.h("h2", { key: '25530f02826d00aa67a4f71806c41e352bbb50f6' }, "Grid"), index.h("h4", { key: 'caf90f90a70bafad8ca8b7b62b8df540f50ce65a' }, "Contact"), index.h("smoothly-form", { key: '695785e50dc958d107150f5aeb3d9970a72a77d9', looks: "grid", action: "https://webhook.site/85bb78f6-b450-4a74-81ac-d7cac6e94bbe" }, index.h("smoothly-input", { key: '6ba827feb6af46074e1a481c5be70a1eef29a9a4', type: "text", name: "name.last" }, "First Name"), index.h("smoothly-input", { key: '2ae3b08c72f84a889655f6728e0ea58139230d08', type: "text", name: "name.first" }, "Last Name"), index.h("smoothly-input", { key: '95541ab6dabc6df9afbdfcf7e165bb232832186c', type: "text", name: "street", value: "Torgny Segerstedts All\u00E9 87" }, "Street"), index.h("smoothly-input", { key: '3ce7c2b2834bd2b0c2970a4c308c2a6c197cd9e9', type: "postal-code", name: "zip" }, "ZipCode"), index.h("smoothly-input", { key: '9b446b78bf4cc9cb93a996dd41359d711ffb7250', type: "text", name: "city" }, "City"), index.h("smoothly-input", { key: 'd401905c1dcdab87e7ff706d85aec1695e2c6f7d', type: "text", name: "countryCode" }, "CountryCode"), index.h("smoothly-input", { key: '4e049fd3cb543cf7ed79aa468fe8d99a5d5ce6c0', type: "phone", name: "phone" }, "Phone"), index.h("smoothly-input", { key: '9b28b44be528ccce7b87adacd8ba18ed25644bc0', type: "email", name: "email" }, "Email"), index.h("smoothly-submit", { key: '15ced734ed045894a4fc131ff01cee34aa83d7b3', slot: "submit", color: "success", fill: "solid" }, index.h("smoothly-icon", { key: 'aa0e8276e4ed8859595fafe44955df25ba9200ca', name: "checkmark-circle", slot: "start" }), "Submit")), index.h("h4", { key: 'b6bed43adb1c02db023941ebc30af3f42c56717c' }, "Card"), index.h("smoothly-form", { key: '232d425a7f9b964b2ce424d9893a3af96c4ab0ac', looks: "grid", onSmoothlyFormSubmit: (e) => alert(JSON.stringify(e.detail)) }, index.h("smoothly-input", { key: 'cdc31e9e1e02330908b31d5d1e153ecea4ef2c31', type: "card-number", name: "card" }, "Card #"), index.h("smoothly-submit", { key: '57b8e847fd8a88a89db3a9521fecb2b89de820b7', size: "icon", slot: "submit", color: "success", fill: "solid" }, index.h("smoothly-icon", { key: 'a0923ad3e9ced414818b0fc1bb25ef495d7ee8fd', name: "checkmark-circle" })), index.h("smoothly-input", { key: '584ca28a392b23c45bc0ad8e116a55699f78166d', type: "card-expires", name: "expires" }, "Expires"), index.h("smoothly-input", { key: 'd5b2256b30f7e49356c0144222314f3900512d32', type: "card-csc", name: "csc" }, "CVV/CVC"), index.h("smoothly-input", { key: 'ae4096cb8526f8ccb04dcddd8ea631d8c8652dcb', type: "text", name: "name.first" }, "First Name"), index.h("smoothly-input", { key: '84bb0b7fac6de8f710225c1678250e9154594902', type: "text", name: "name.last" }, "Last Name")), index.h("h4", { key: 'ede5a9142da32535e22cc481a24d87a18a713b11' }, "Contact"), index.h("smoothly-form", { key: '1c471e7fcbd77020b47f64ccf22db7e1693da78c', looks: "grid" }, index.h("smoothly-input", { key: 'e80563b6f171a254797f5a5d45ea48dde90dd7f9', type: "text", name: "username" }, "Username"), index.h("smoothly-input", { key: '91994e6f6c71430794b603a78bbc34da71ed4555', type: "password", name: "password" }, "Password"), index.h("smoothly-input", { key: '244514953b76379afebb1233547a3c6b2ae736c1', type: "price", currency: "SEK", name: "price" }, "Price"), index.h("smoothly-input", { key: '848be81a5974984c4b3df015113487b3e700f790', type: "percent", name: "percent" }, "Percent"), index.h("smoothly-submit", { key: 'f4d2cfacb7a70cec1ed1b89efd330bbd1642a7f7', slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { key: 'b556509b7c826b8dd6545348babcbfb4c633e6e3', name: "checkmark-circle" }))), index.h("h4", { key: '7bef748c21665d2300b0df32abb27f460a8fef19' }, "Random"), index.h("smoothly-form", { key: '082963917036436095173c635b095656ce349303', looks: "grid" }, index.h("smoothly-input", { key: '3f32e2c2601622bc62e5d2a144352b7325d2250e', type: "text", name: "name", readonly: true, value: "Readonly", onSmoothlyBlur: () => console.log("smoothly blur"), style: { width: "100%" } }, "Readonly"), index.h("smoothly-input", { key: '48dec3d54ced874ca2489c89f28d2950068051bd', type: "text", name: "testing" }, "TextTest"), index.h("smoothly-input", { key: 'e99293428ba3466a303fdacac0c8c15d81ad743d', type: "date-time", name: "date-time" }, "Date-Time"), index.h("smoothly-input", { key: 'cf8781002ae8cdd1d1b5b19b7de04e7bd18bfaeb', type: "divisor", name: "divisor" }, "Divisor"), index.h("smoothly-input", { key: '79829241e3dc5ebe30e173f00e65332a77cea0a2', type: "date", name: "date" }, "Date"), index.h("smoothly-input-date", { key: 'e651896811d911901e535d5bcb46572d21067a3c', name: "some-date" }, "Calendar")), index.h("h2", { key: '3b097407cdcec885838bdaadc74cb9cd54038962' }, "Line"), index.h("smoothly-form", { key: '08100cb052724441390dbf538bee66b112b35447', looks: "line", action: "https://api.toiletapi.com/upload/6b12fd2f-e896-46f9-b38f-25cf42cee4b4" }, index.h("smoothly-input", { key: 'bb66ff56629ba10e45252a0d8aeadec2fd106664', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, "First Name"), index.h("smoothly-input", { key: '1973c8ffb69a21041334ee66225b6376e0ccd157', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name"), index.h("smoothly-submit", { key: 'f7017c97032abb98439520f3b991ef673d2a0db2', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), index.h("h2", { key: 'e249769d8bdfdd154ef8bd1fa67bbed8473678d0' }, "Input Alternatives"), index.h("smoothly-form", { key: '6fa47df538a0441344639415951706281cea9365', looks: "border" }, index.h("smoothly-input", { key: '5a1c064e2c7d4c5b290ec92f98ab9ec05456ebbe', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, index.h("smoothly-icon", { key: 'a6e39c115743404a502daf540e6fa4e24757758e', name: "checkmark-circle", slot: "start" }), "First Name"), index.h("smoothly-input", { key: '812fd847ed00bbcc6e13ebe748de27fdb793bb03', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '51d186058090f5441d39a0818c1932baf8d270aa', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: 'e651e36da18a170037fbdae9eb9ce4fd67ba08c2', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", index.h("smoothly-icon", { key: '7477f80b1f8dfdd69ec7b1173998961f906bd911', name: "checkmark-circle", slot: "end" })), index.h("smoothly-input", { key: '59ddd5a19bb7504c097766964c72d218fdde9ba4', placeholder: "test" }), index.h("smoothly-submit", { key: '8187e5f5e7a2003754757be1dc052cc1a5c02c3c', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }, "Send")), index.h("h4", { key: '5e43753a14903903e2a5cd980c6e0dcc09aecc82' }, "Smoothly checkboxes"), index.h("smoothly-form", { key: 'f4522f73de6604dbef6f6f9e2086f500e7e2c9ab' }, index.h("div", { key: 'fa0085fb71e290029601aac0f06551ab5ecc2fa6', class: "checkbox-group" }, index.h("smoothly-input-checkbox", { key: '2eba210301d65404f22f81c9c9ddec7d5704660a', disabled: true, name: "first-checkbox" }, index.h("smoothly-icon", { key: 'a2c2d845677f20a57d80c1a49c1e68d4ea7916bb', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), index.h("smoothly-input-checkbox", { key: 'ae3e7a1006e343f7af6a29fd8182de6d91e7fdea', name: "second-checkbox", checked: true }, index.h("smoothly-icon", { key: 'da4c9a10e8c41766fced193af792fb7314db38b6', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", index.h("smoothly-input-clear", { key: '52b456a34165273290d81e04fc117bd82c977699', size: "icon", slot: "end" }, index.h("smoothly-icon", { key: 'babe7538bcf5979da38bcfb59884a993e6b5ad22', name: "close" }))), index.h("smoothly-input-checkbox", { key: '69c219595894bf58c7ec370480553ce8149319d5', name: "third-checkbox" }, "3rd"))), index.h("h4", { key: 'c46233402ef3d2e9cd8eba9b50e40bf75d3a192b' }, "Smoothly Radio Buttons"), index.h("smoothly-form", { key: '157cfc520ac7856a89c0356c0f9c8515e18bc440', onSmoothlyFormSubmit: e => console.log(e.detail), looks: "border" }, index.h("smoothly-input-radio", { key: 'd9e803e21e81225aeec53448b87199d1ea19620b', clearable: true, name: "radioFirstInput" }, index.h("smoothly-icon", { key: '2cf313389b8aea8994273b4958e4564561999f8f', name: "checkmark-circle", slot: "start" }), index.h("smoothly-input-clear", { key: '76fe02af05a46a960493f9253b6f22733e4499d0', size: "icon", slot: "end" }, index.h("smoothly-icon", { key: '7bd44f99f89cf6f6bcbfe6cefe15313fa39e1698', name: "close" })), index.h("p", { key: '9dd86b2f800c190936bfe8bbec3818d29b0e6332', slot: "label" }, "Clearable"), index.h("smoothly-input-radio-item", { key: '919ebee2c267b774d5104de0887965509b1575a4', slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: 'a2a5ea452aae0da8e2ba7c6056d020e000a8e72c', selected: true, slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '406faa32ac32eadb1257066a42c3b7bffe5a5a61', slot: "options", value: "third" }, "Label 3")), index.h("smoothly-input-radio", { key: '9229ec31589a79060095763410938f73c8810a1b', name: "radioSecondInput" }, index.h("p", { key: '5c87b8f731bc179b85b19ddc3028dc40b8e6a060', slot: "label" }, "Not clearable"), index.h("smoothly-input-radio-item", { key: '7843b1c54f0d4512926e1f62d9ec7ad55d1ef9cf', slot: "options", value: "first" }, "Label 1"), index.h("smoothly-input-radio-item", { key: '316c22ad3cf6c2f1353bb4a0b139abe77319ea99', slot: "options", value: "second" }, "Label 2"), index.h("smoothly-input-radio-item", { key: '5791f92da91a9eec10e2a4743bfd1649bf0a3a19', slot: "options", value: "third" }, "Label 3"), index.h("smoothly-input-radio-item", { key: '7d4f622c8b6052f694bce95bff9a9e4eb8300420', slot: "options", value: "fourth" }, "Label 4"), index.h("smoothly-input-radio-item", { key: '929243fc720e0d664734560ff839f84595a58233', slot: "options", value: "fifth" }, "Label 5"), index.h("smoothly-input-radio-item", { key: 'f50f5fa41407d075b8b330c92988866f1757432a', slot: "options", value: "sixth" }, "Label 6"))), index.h("h4", { key: '022387409f5c179053668e4f203077a9345f16f8' }, "Smoothly Picker"), index.h("smoothly-picker-demo", { key: 'a2ad3143ae6b8fb9e74ba83a99831f9d7e74bf8a' }), index.h("smoothly-back-to-top", { key: '48da5e19b135a42a2f99553c1666690216194cb1' }), index.h("h4", { key: '39676225dd1ed42cfec881223cf28ab20ab5c971' }, "Smoothly Date"), index.h("smoothly-input-date", { key: '6f91ded4be9b9bebbfd9df0a05bb644e57cb64f9' }, "Date"), index.h("smoothly-input-date", { key: 'a9dd392ea9fdad18376dd6710404817cda925e64', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-form", { key: '022af2a42584df7730afd18a46aba4ce92f550a2', looks: "grid", onSmoothlyFormSubmit: e => console.log(e.detail) }, index.h("smoothly-input-date-range", { key: '4308ccc74c07b0c2cc409bf2fbcc3d2fd571705e', name: "testing", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2024-12-30" }), index.h("smoothly-input-clear", { key: '821005373591f18fcf6ba0915b3bd4b2f861e0e2', type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), index.h("smoothly-submit", { key: '478f5a23749a87948d13d6e83eb08e86d3bf2fe6', slot: "submit" }, "submit daterange")), index.h("smoothly-input-date-range", { key: '53880c77210bf18b3fdae31657946a5510018194', looks: "grid", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--border-radius": "4px",
                 "--padding": "0 0.75em",
                 "--input-width": "12ch",
-            } }), index.h("smoothly-form", { key: '960e109a33ea32fafcb44787d027c18725537427', looks: "grid", onSmoothlyFormSubmit: e => console.log("Submitted", e.detail) }, index.h("smoothly-input", { key: '155560f138f20a8843bcbe45338edf38ef653b6c', type: "text", name: "text" }, "Text"), index.h("div", { key: '1e2e17045a8a9b343287fa59c10784a2b05115bd' }, index.h("smoothly-input-file", { key: '5e921e548c552b55ba1e53d7795c22315256c5ef', placeholder: "Select or drag a file here", name: "file" }, index.h("span", { key: '022ccd7b4a22e7662bedd100567a5d7156e78d6c', slot: "label" }, "Testing file input"), index.h("smoothly-icon", { key: '46f64e357c5710411aa3486ce450344223b33ee6', slot: "button", name: "folder-outline" }))), index.h("smoothly-input-file", { key: '883a1eaa6995254f2655165d8ff1b9b4fbbbb76a', camera: "back", placeholder: "Capture a photo", name: "image" }, index.h("span", { key: '655bde84fbe9aa72041c593b7a49c46657c2f6ce', slot: "label" }, "Testing camera photo"), index.h("smoothly-icon", { key: 'ad3de2dabfd57569710126e3ed1e182ec6c60566', slot: "button", name: "camera-outline" })), index.h("smoothly-input-clear", { key: '765da1fe4fa9762a947557bc31209796acbf7147', type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), index.h("smoothly-submit", { key: 'e67d21c74caef8e9b512a6b5d29877464de20adb', slot: "submit" }, "Submit")), index.h("br", { key: '8299a3176f3add0cc39761b9f3a5e974816a3fd1' }), index.h("smoothly-form", { key: 'f380f7cbabddb4c051e6e38e1dbf12b0cf7f6e7d', looks: "line", onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, index.h("smoothly-input", { key: '55822b096e4b2acee6a29b46581651cb5a79c652', name: "text" }, "Input"), index.h("smoothly-input-file", { key: '982e9bff2c1da698c3db6f69de898f58c672e6e7', camera: "back", placeholder: "Capture a photo", name: "image" }, index.h("span", { key: '841133079eb1d214b3d30a46512e0e75d9af7f37', slot: "label" }, "Testing camera photo"), index.h("smoothly-icon", { key: '612f1019babf0c7fe52f50b0e5f25b8450e62c08', slot: "button", name: "camera-outline" })), index.h("smoothly-picker", { key: '55887c61cd4d59ff390485dde5e95336b424a735', name: "picker" }, index.h("span", { key: '63f8ac181418301f1e5b60306867565155aad4de', slot: "label" }, "Shape"), index.h("span", { key: 'af756aaa2c76629743429a4495ee97f88a8f9980', slot: "search" }, "Search"), index.h("smoothly-picker-option", { key: 'f858941117e3b3809e6c58f3ca63dd317db2509d', value: "circle" }, index.h("span", { key: '3eef119cdfdf77be3e11d2065aa6bba8e01db481', slot: "label" }, "Circle"), index.h("smoothly-icon", { key: 'f1fd92af3d6d11cdbb9229bcaf947f125a91bb20', size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { key: 'bbcfa122f5bdd95192e6e42d2f114f0d72bf5987', value: "cube" }, index.h("span", { key: '1ff379965c15ada95cd4eba6a08c77dd3331a8b9', slot: "label" }, "Cube"), index.h("smoothly-icon", { key: '687229b28a2357c99c50d11231b334201bb65991', size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { key: '8dc53b75828286403b8c688c7fd5cc50886c0796', value: "square", selected: true }, index.h("span", { key: 'c7ada0706b0c9d2cdff26644fa7c92c19efdf4e4', slot: "label" }, "Square"), index.h("smoothly-icon", { key: '8b118ac28a4db1838370613a083bed35263d9a2a', size: "tiny", name: "square-outline" }))), index.h("smoothly-input-select", { key: '56b235a5d3d9f1300e0dd4cfd1933e3ee8393e0a', name: "select", placeholder: "Select...", menuHeight: "7.5items" }, index.h("smoothly-item", { key: '3ec331c2ff6a9ae2ef8b84db282eb6d29cae2b6a', value: "1" }, "January"), index.h("smoothly-item", { key: '10035f5c6e693b9bbf9f44f4378f24bad9a71179', value: "2" }, "February"), index.h("smoothly-item", { key: 'b40c888f4c210f857a8f5bb3de920d75869341a6', value: "3" }, "March"), index.h("smoothly-item", { key: '01b140f26b5f598d7515aeff405b3273937b2c58', value: "4" }, "April"), index.h("smoothly-item", { key: 'a2c8ee57a4b6415c3faf9d08b084216785699efb', value: "5" }, "May"), index.h("smoothly-item", { key: 'f4c436026a6316831cea0be57e7bb30bad7e97bd', value: "6" }, "June"), index.h("smoothly-item", { key: '970048a6161d90e36c64891e071f7d2c554a539e', value: "7" }, "July"), index.h("smoothly-item", { key: '5cd80924b54f646fd2bcac0954fa66685cbaf286', value: "8" }, "August"), index.h("smoothly-item", { key: '03794d2903f2e0276f610300979643185faef142', value: "9" }, "September"), index.h("smoothly-item", { key: 'f9d57fee8bcf86b059ea99b6790e1027d6237129', value: "10" }, "October"), index.h("smoothly-item", { key: 'f29eefa6f56bdcec09dd93d0ad6fbb5852def3ff', value: "11" }, "November"), index.h("smoothly-item", { key: 'a0e3edb89a481750d5ca7f4006aa200a352ceaed', value: "12" }, "December")), index.h("smoothly-input-date-range", { key: 'e6997eeb91a2c997bdf0dbc242a9463f9b8cb865', name: "date-range", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+            } }), index.h("smoothly-form", { key: '3f49e9c5c8cc12f82b61df988bccb9a0005c7d01', looks: "grid", onSmoothlyFormSubmit: e => console.log("Submitted", e.detail) }, index.h("smoothly-input", { key: 'd0024344be72beacf01b9f992531a20b9040ab45', type: "text", name: "text" }, "Text"), index.h("div", { key: '10dc49e4b32fe4a8e5b33f8f22692d7f01e75ea2' }, index.h("smoothly-input-file", { key: 'd47ec5c675b6f7f75012434dd8bb562b1c435be9', placeholder: "Select or drag a file here", name: "file" }, index.h("span", { key: '62393b183433fcc75c9f9f81237900f49834d844', slot: "label" }, "Testing file input"), index.h("smoothly-icon", { key: '6fc060f944df78cc9baf62316dfa4f6bd4511db8', slot: "button", name: "folder-outline" }))), index.h("smoothly-input-file", { key: 'f365c848bc3e565d88d91ddf30ec4e2ade9d8c4f', camera: "back", placeholder: "Capture a photo", name: "image" }, index.h("span", { key: '210cd83558bf55f2b33044df02b59a1b96660ce8', slot: "label" }, "Testing camera photo"), index.h("smoothly-icon", { key: '29c734969b1947789bde0ffce0dbd927d329c41c', slot: "button", name: "camera-outline" })), index.h("smoothly-input-clear", { key: '9953ef4846013e406b354076b7949f0b938bce8a', type: "form", color: "danger", fill: "solid", slot: "clear" }, "Clear"), index.h("smoothly-submit", { key: '69cf5afa6ed29efa51baf53447b4317d7fd729d7', slot: "submit" }, "Submit")), index.h("br", { key: 'ddb84558fb06f01201e710417bc292448692d499' }), index.h("smoothly-form", { key: 'b49ac91bc1c10a2980e77a251ee9e0da9200408c', looks: "line", onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, index.h("smoothly-input", { key: '3b2a17912a0bfca2fc7aab92bdfc4f065509695b', name: "text" }, "Input"), index.h("smoothly-input-file", { key: 'f977354732db21fac7016cc8a5c688aaf147d052', camera: "back", placeholder: "Capture a photo", name: "image" }, index.h("span", { key: 'e9ab9e2a47f5a96383fcc36b6f7a8071f9f3b2b1', slot: "label" }, "Testing camera photo"), index.h("smoothly-icon", { key: '7fa9bd7043b622015a576c9dc498b6f7d5922efd', slot: "button", name: "camera-outline" })), index.h("smoothly-picker", { key: '854265e9850a34d00da0d8e1db9f6a6b28d315ae', name: "picker" }, index.h("span", { key: '532a2048803f2006fb3c302bd08c8166c3d39bda', slot: "label" }, "Shape"), index.h("span", { key: 'bc207defa5130acaf5bea6209816e8daba3b1480', slot: "search" }, "Search"), index.h("smoothly-picker-option", { key: '2d37d04bceccbe250b020fb472515b1f99b4864c', value: "circle" }, index.h("span", { key: '6cbff41182deba8d9ef81aa1dc6af3af5f895ac8', slot: "label" }, "Circle"), index.h("smoothly-icon", { key: 'e65abc900ded1598e46df4453fb36ea3a7c531d2', size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { key: 'd046d12260a1bab9f143e6c8e9c6cbe0b0a0f5d4', value: "cube" }, index.h("span", { key: '8e91cedfdf5291ca5f871b052015c2280b342f36', slot: "label" }, "Cube"), index.h("smoothly-icon", { key: '975862a92d8def5dcf1a553b92e8ede15c58d450', size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { key: 'fa5413ba4021cb0f112ecf40458406f7f9c174dc', value: "square", selected: true }, index.h("span", { key: 'a324b50ee19ccd99a9fb79fea2fcbe424aa82e7f', slot: "label" }, "Square"), index.h("smoothly-icon", { key: '780eeeeadf2fe965cb1b85fcc63094567488f1ae', size: "tiny", name: "square-outline" }))), index.h("smoothly-input-select", { key: 'c53f82e753033c8c8b0327297610e2ad3eda4a4f', name: "select", placeholder: "Select...", menuHeight: "7.5items" }, index.h("smoothly-item", { key: 'f5d86666612b0f252b57f9fcd86dfae0e10903d8', value: "1" }, "January"), index.h("smoothly-item", { key: 'b43c9e406606d57f6aadd00c2a2ccf6c1ec5cfc3', value: "2" }, "February"), index.h("smoothly-item", { key: 'e49e5aa35c8220e0caac95fc148cf11fffb8ae0f', value: "3" }, "March"), index.h("smoothly-item", { key: 'b8ac1e461ecb454dfa5ee85c3e23716b5bdffd98', value: "4" }, "April"), index.h("smoothly-item", { key: '8a9841f4e745ec9ab8ab4c5095f8b065242f1b19', value: "5" }, "May"), index.h("smoothly-item", { key: '2d11c8f3f2012083e8c0315db6a38d459bc4cf65', value: "6" }, "June"), index.h("smoothly-item", { key: '0694654e7e175fdca2468a1b488616197f263b0e', value: "7" }, "July"), index.h("smoothly-item", { key: 'a35d30383712049d4d8900a9b7691f66afecf1b2', value: "8" }, "August"), index.h("smoothly-item", { key: '77372d54394ab1595e5aa9323650ce10d7bd2416', value: "9" }, "September"), index.h("smoothly-item", { key: '8fdc8860f7946ffb94a628464037d3ca0735a2b7', value: "10" }, "October"), index.h("smoothly-item", { key: 'e5787dce4b64fde09b281c63aeb5395db3b690ca', value: "11" }, "November"), index.h("smoothly-item", { key: 'e59ca829518350ae48aa0bed9d928de1af0211a6', value: "12" }, "December")), index.h("smoothly-input-date-range", { key: '1085e0cf61c40fd59fdd75b0437685bb66503fbe', name: "date-range", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--border-radius": "4px",
                 "--padding": "0 0.75em",
                 "--input-width": "12ch",
-            } }), index.h("smoothly-input-date", { key: '31169fe2d65a04ca964f77917b9f0d2957b11f9c', name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-submit", { key: '4146605612a4778705a0cd7bc52b2371c95fd1d6', slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { key: 'b94a23bb01e7c5f4236d618c9cc6b10c8b513a77', name: "checkmark-circle", fill: "solid", size: "medium" }))), index.h("h4", { key: '4ddce0398f6c6b5b275dc78ed7c3fc45c20c046d' }, "Form with spinner showcase"), index.h("smoothly-form", { key: '0bacd47571de91dc2f0449e286e49f95010ccbe6', looks: "line", onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, index.h("smoothly-input", { key: '5f117137ea89f326a9ce4dbe234fa73b8b95f001', name: "text" }, "Input"), index.h("smoothly-input-file", { key: 'e05ca1486a007504d0df23b68785c90cb1b1b009', camera: "back", placeholder: "Capture a photo", name: "image" }, index.h("span", { key: 'd580a241beb09d1467dbac1d1e34771bb180225d', slot: "label" }, "Testing camera photo"), index.h("smoothly-icon", { key: '79eff179094137a8006070fff1a16cbb694e1b43', slot: "button", name: "camera-outline" })), index.h("smoothly-picker", { key: 'b41f82254f923ba1d7897be544a7eaee798a3487', name: "picker" }, index.h("span", { key: 'bafb0b10435d0b7329b032a58404c08c43b7447d', slot: "label" }, "Shape"), index.h("span", { key: 'd5cd0d2689919ebb41e070e3ff707dcdb7fc084f', slot: "search" }, "Search"), index.h("smoothly-picker-option", { key: '1bd959a558ac9123febd481c94c3637e8f9d8feb', value: "circle" }, index.h("span", { key: 'a5a930b8fe1c450506788f5355e7f79e4a14938a', slot: "label" }, "Circle"), index.h("smoothly-icon", { key: 'efb5a139154033b15b2e176d531db79716313ea8', size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { key: '672fb6a1a5ea9aa1870553bc53674a87604ee7b4', value: "cube" }, index.h("span", { key: '3a9ece845b272f9e5f812286f849c120e8d28727', slot: "label" }, "Cube"), index.h("smoothly-icon", { key: 'ff6b2147d169b398f031baf02be4f9f7b667a67e', size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { key: '77bf68e9ed7da868ce4fa1dcd29cd59e9c80caa1', value: "square", selected: true }, index.h("span", { key: 'f2c34ded8aa60c6a970c1daea2a481fe295f86de', slot: "label" }, "Square"), index.h("smoothly-icon", { key: '7ac44aec47a9417360157950f794f00bc45505db', size: "tiny", name: "square-outline" }))), index.h("smoothly-input-select", { key: '32565c2a1fca32fb01325bb490a02367fabe68bb', name: "select", placeholder: "Select..." }, index.h("smoothly-item", { key: '0b89e7960689f8e3718b58877b505ccfb53467a6', value: "1" }, "January"), index.h("smoothly-item", { key: 'e320f1a9d00314524adab53a60ce097263002080', value: "2" }, "February"), index.h("smoothly-item", { key: '86ebbb20d9033f0de0f72fc8bb5c4a6de65322c4', value: "3" }, "March"), index.h("smoothly-item", { key: 'a641c39241e15234797c17c86cafe3654034cb41', value: "4" }, "April"), index.h("smoothly-item", { key: 'f898e392666349ba1288effd879c9104d725f1a1', value: "5" }, "May"), index.h("smoothly-item", { key: '6c6cc7658685b004cf9aa1d44f76af0901815e66', value: "6" }, "June"), index.h("smoothly-item", { key: '22f05b71fa9c6213f5e3cc712ef5faba425c0fff', value: "7" }, "July"), index.h("smoothly-item", { key: '9333f6ba98c94b9cb5c57cacae6fbfb8cd3e6800', value: "8" }, "August"), index.h("smoothly-item", { key: 'a0856e5e2ebad1c8a36164821a40aeded628ee81', value: "9" }, "September"), index.h("smoothly-item", { key: 'a4f61643498841ffbdf9108941b54642d10cb365', value: "10" }, "October"), index.h("smoothly-item", { key: '2d17b12632ca54cc35cd6ba98fb6eb30be36496a', value: "11" }, "November"), index.h("smoothly-item", { key: 'bdeac1d2237130d948337bec2e4968db8f1f802e', value: "12" }, "December")), index.h("smoothly-input-date-range", { key: '0ab6d7e924370a724d774b1397ce11a91c189f9d', name: "date-range", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
+            } }), index.h("smoothly-input-date", { key: 'cfcb50ac78f113c7456177a87db60641b0e18411', name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-submit", { key: 'ba69c6a35c139c0a740d9f954d7eb9a8e3c01eb9', slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { key: 'c56d17c07ca5a7d97d4fe408097b6dce30d2efca', name: "checkmark-circle", fill: "solid", size: "medium" }))), index.h("h4", { key: '27a89feea561962d21f7231dff9263effdefb596' }, "Form with spinner showcase"), index.h("smoothly-form", { key: 'ad8f932d667fe9e1da64a0b9774686920759e6ed', looks: "line", onSmoothlyFormSubmit: e => console.log("form input", e.detail) }, index.h("smoothly-input", { key: '6e6dcc97fc18c08ce84b5560c3042aef33f287eb', name: "text" }, "Input"), index.h("smoothly-input-file", { key: 'd842dcde21bf5744791f9c38cb63a2b07dca3005', camera: "back", placeholder: "Capture a photo", name: "image" }, index.h("span", { key: '79596530afed007b599de75cc0b23508b244ff49', slot: "label" }, "Testing camera photo"), index.h("smoothly-icon", { key: '1b46d1b6d5b2b8f4fb7e092c687fab8b16540905', slot: "button", name: "camera-outline" })), index.h("smoothly-picker", { key: '008ed0b6fabdd5e1b01991290fa2da65edcff0d0', name: "picker" }, index.h("span", { key: '6811d312c069b661e55d8e5d42cca3fbbcaaff71', slot: "label" }, "Shape"), index.h("span", { key: 'a874bf9b1ea8b689169ab77609c019bc15bc8eb3', slot: "search" }, "Search"), index.h("smoothly-picker-option", { key: '4fa46f6d3818032a6e8b3f172e85e53c36356102', value: "circle" }, index.h("span", { key: '3cd6bbd7aa4dec87576a0f3ce7b7efc71a5056e9', slot: "label" }, "Circle"), index.h("smoothly-icon", { key: '9e5e5e85b718d29c53f87c3de8b58a1dd4987ac4', size: "tiny", name: "ellipse-outline" })), index.h("smoothly-picker-option", { key: 'deb649238dbc9b62d09581fadacfc4e11ff66ac5', value: "cube" }, index.h("span", { key: '7783b0623bb0b77735d16664a3f4f2edc6d57d17', slot: "label" }, "Cube"), index.h("smoothly-icon", { key: '3d3de1a8c3bae086fc7f6b953880f91442ae0da1', size: "tiny", name: "cube-outline" })), index.h("smoothly-picker-option", { key: '98cd735e167977a83b782131a4edbdbabd602968', value: "square", selected: true }, index.h("span", { key: '67601e59d982d9dd8dc4821c8c2a13ea3019032d', slot: "label" }, "Square"), index.h("smoothly-icon", { key: 'd5929dc81a0d24ab5eb64cf40b8f38ebe4c511d7', size: "tiny", name: "square-outline" }))), index.h("smoothly-input-select", { key: '4ab03eb2b8797b7584025854a8da4ecf671f403a', name: "select", placeholder: "Select..." }, index.h("smoothly-item", { key: 'd9390913cfa268f6ae3da36b29826ed87d31cf08', value: "1" }, "January"), index.h("smoothly-item", { key: '5781b08099d17dfa8c35ce0cd6d85d5c22ede98e', value: "2" }, "February"), index.h("smoothly-item", { key: 'e0cff8ff5b9c71b90a3483b215291715fd464e69', value: "3" }, "March"), index.h("smoothly-item", { key: '76ecd4149fd8024fc217748e40e5eaeae9e31454', value: "4" }, "April"), index.h("smoothly-item", { key: 'e1133ba25e2eb23281d90a085aa92fc819366394', value: "5" }, "May"), index.h("smoothly-item", { key: '9f1589aa59b1c452ee3c2c60f46d4585b7e29ead', value: "6" }, "June"), index.h("smoothly-item", { key: 'ff8d6553ba86eb3956d8d24f9b6f6f824fa663c7', value: "7" }, "July"), index.h("smoothly-item", { key: 'ab4a4de9a098fcfe7746c52ddca4a68bef03eda0', value: "8" }, "August"), index.h("smoothly-item", { key: '5eb3234859ab6127ea7aa8bf55e35c56a2925fc1', value: "9" }, "September"), index.h("smoothly-item", { key: 'efdd4703baa32d6ebc2e5db948ba12263c013e62', value: "10" }, "October"), index.h("smoothly-item", { key: '9d50d95b6a7ba759af0703eb68c0663415ff6fb8', value: "11" }, "November"), index.h("smoothly-item", { key: '537ac015ff070ae02160bbc931357926adc2e4c8', value: "12" }, "December")), index.h("smoothly-input-date-range", { key: '2ce4c4a9c47c5c0ffce7ef06704bd79e77bbd5ea', name: "date-range", start: TimeZone.Date.now(), end: TimeZone.Date.nextMonth(TimeZone.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
                 "--border-radius": "4px",
                 "--padding": "0 0.75em",
                 "--input-width": "12ch",
-            } }), index.h("smoothly-input-date", { key: '1ba87948d0d8e544cf1f91483297b0d131ba8c9c', name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-submit", { key: '790c2691dea9826b715b5941feea9debc0ab2059', slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { key: '3e1395671cca5271b642a2507c5783337ced6aef', name: "checkmark-circle", fill: "solid", size: "medium" })))));
+            } }), index.h("smoothly-input-date", { key: 'f92bc8f2e3446418590e12a68c9501c0fa642216', name: "date", value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), index.h("smoothly-submit", { key: 'c07b61c621cdf751a6d680c8a4733b6c48f04f34', slot: "submit", color: "success", fill: "solid", size: "icon" }, index.h("smoothly-icon", { key: 'd36f4743c6daa0136b3ca6cde6cd69aa8a2c61e6', name: "checkmark-circle", fill: "solid", size: "medium" })))));
     }
 };
 SmoothlyInputDemo.style = SmoothlyInputDemoStyle0;
@@ -11512,7 +11536,7 @@ const SmoothlyNextTableRowGroup = class {
 };
 SmoothlyNextTableRowGroup.style = SmoothlyNextTableRowGroupStyle0;
-const styleCss$z = ".sc-smoothly-notification-h{display:block;position:relative;width:30em;min-height:3em;border-radius:5px;margin:0.5em}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification,.sc-smoothly-notification-h>span.clean.sc-smoothly-notification{display:flex;justify-content:center;align-self:center}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification{display:flex;width:100%;justify-content:center}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>p.sc-smoothly-notification{padding-right:1em}.sc-smoothly-notification-h>span.sc-smoothly-notification>p.sc-smoothly-notification{text-align:left}[hidden].sc-smoothly-notification-h{display:none}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification{margin:0 0.5rem}.sc-smoothly-notification-h>smoothly-trigger.sc-smoothly-notification{font-size:0.7em;position:absolute;right:0}";
+const styleCss$z = ".sc-smoothly-notification-h{display:block;position:relative;min-width:30em;min-height:3em;border-radius:5px;margin:0.5em}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification,.sc-smoothly-notification-h>span.clean.sc-smoothly-notification{display:flex;justify-content:center;align-self:center}.sc-smoothly-notification-h>span.sc-smoothly-notification{margin:0 2rem 0 1rem}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification{display:flex;width:100%;justify-content:center}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>p.sc-smoothly-notification{padding-right:1em}.sc-smoothly-notification-h>span.sc-smoothly-notification>p.sc-smoothly-notification{text-align:left}[hidden].sc-smoothly-notification-h{display:none}.sc-smoothly-notification-h>span.icon.sc-smoothly-notification>smoothly-icon.sc-smoothly-notification{margin:0 0.5rem}.sc-smoothly-notification-h>smoothly-trigger.sc-smoothly-notification{font-size:0.7em;position:absolute;right:0}";
 const SmoothlyNotificationStyle0 = styleCss$z;
 const Notification = class {