@salla.sa/twilight-components 2.14.545 → 2.14.547

package/dist/components/salla-comment-item2.js

@@ -188,7 +188,7 @@ const SallaCommentItem = /*@__PURE__*/ proxyCustomElement(class SallaCommentItem
             : null, (this.comment.has_order || !!this.comment.rating) && !this.comment.is_pending && !this.hideBought ?
             h("div", { class: "s-comments-flex" }, this.comment.has_order ?
                 [h("span", { class: "s-comments-item-has-order-check-icon", innerHTML: IconVerified }), h("span", { class: "s-comments-item-has-order-check-text" }, this.has_bought_trans, " ", this.comment.rating ? ', ' : '')] : null, !!this.comment.rating ?
-                h("span", { class: "s-comments-item-rated-widget" }, this.rated_trans) : null)
+                h("span", { class: "s-comments-item-has-order-check-text" }, this.rated_trans) : null)
             : null), h("p", { class: "s-comments-item-timestamp s-ltr" }, this.getDate(this.comment.created_at?.date), h("span", { class: "s-comments-item-time" }, " - ", this.getTime(this.comment.created_at?.date)))), (!!this.comment.rating || !!this.comment.stars || hasReviewFactors) && (h("div", { class: "flex flex-row gap-4 mt-2 mb-4" }, (!!this.comment.rating || !!this.comment.stars) ? (h("salla-rating-stars", { class: "w-auto", size: "medium", value: this.comment.rating || this.comment.stars })) : null, hasReviewFactors && (h("button", { class: "s-comments-item-review-factors-toggle", type: "button", onClick: () => (this.showReviewFactors = !this.showReviewFactors) }, h("span", null, this.reviewDetailsLabel), h("span", { class: {
                 "s-comments-item-review-factors-chevron": true,
                 "is-open": this.showReviewFactors,

package/dist/components/salla-comments.js

@@ -25,6 +25,18 @@ var CommentType;
     CommentType["PRODUCT"] = "product";
     CommentType["BLOG"] = "blog";
 })(CommentType || (CommentType = {}));
+function isFeatureEnabled(feature) {
+    return !!salla.config.get('store.features')?.includes(feature);
+}
+function buildCommentSortOptions({ mostHelpfulLabel, verifiedPurchasesLabel, allowLikes, allowVerifiedPurchasesFilter, }) {
+    const options = [
+        { value: 'latest', label: salla.lang.get('pages.testimonials.sort_by_date_desc'), selected: true },
+        { value: 'oldest', label: salla.lang.get('pages.testimonials.sort_by_date_asc') },
+        { value: 'most_helpful', label: mostHelpfulLabel, show: allowLikes },
+        { value: 'verified_purchases', label: verifiedPurchasesLabel, show: allowVerifiedPurchasesFilter },
+    ];
+    return options.filter(option => option.show !== false);
+}
 
 var ChatBubbles = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -64,6 +76,7 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
         this.comment_name = salla.lang.get('blocks.comments.comment');
         this.showRatingSummary = salla.config.get('store.settings.rating.show_rating_summary');
         this.allowLikes = salla.config.get('store.settings.rating.allow_likes');
+        this.allowVerifiedPurchasesFilter = isFeatureEnabled('allow-reviews-from-product-page');
         salla.onReady(() => {
             this.allowLikes = salla.config.get('store.settings.rating.allow_likes');
             this.showRatingSummary = salla.config.get('store.settings.rating.show_rating_summary');
@@ -84,7 +97,10 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
             const setTranslations = async () => {
                 await setNestedAsync('ar.trans', 'blocks.comments.most_helpful', 'الأكثر إفادة');
                 await setNestedAsync('en.trans', 'blocks.comments.most_helpful', 'Most helpful');
+                await setNestedAsync('ar.trans', 'blocks.comments.verified_purchases', 'عمليات شراء موثقة');
+                await setNestedAsync('en.trans', 'blocks.comments.verified_purchases', 'Verified purchases');
                 this.mostHelpfulLabel = salla.lang.get('blocks.comments.most_helpful');
+                this.verifiedPurchasesLabel = salla.lang.get('blocks.comments.verified_purchases');
                 this.comment_title = salla.lang.get('blocks.comments.overall_rating');
                 this.comment_name = salla.lang.get('blocks.comments.comment');
                 this.noComments = salla.lang.get('pages.rating.no_ratings');
@@ -92,6 +108,14 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
             setTranslations();
         });
     }
+    get sortOptions() {
+        return buildCommentSortOptions({
+            mostHelpfulLabel: this.mostHelpfulLabel,
+            verifiedPurchasesLabel: this.verifiedPurchasesLabel,
+            allowLikes: this.allowLikes,
+            allowVerifiedPurchasesFilter: this.allowVerifiedPurchasesFilter,
+        });
+    }
     // TOOD: it's a good idea to move this into lang.js
     // Pluralize a string based on the count
     pluralize(phrases, count) {
@@ -292,6 +316,23 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
             }
             if (!resp.data || !resp.data.length) {
                 this.showPlaceholder = false;
+                this.comments = [];
+                this.nextPage = '';
+                // The wrapper is populated imperatively (see the success branch and
+                // onCommentAdded below), so swap its content directly instead of
+                // toggling showPlaceholder: that would tear down the header/sort
+                // filter too, losing the ability to switch sort back.
+                if (this.wrapper) {
+                    this.wrapper.innerHTML = '';
+                    const empty = document.createElement('div');
+                    empty.className = 's-comments-placeholder';
+                    const icon = document.createElement('span');
+                    icon.innerHTML = ChatBubbles;
+                    const text = document.createElement('p');
+                    text.textContent = this.noComments;
+                    empty.append(icon, text);
+                    this.wrapper.append(empty);
+                }
                 this.loading(false);
                 return;
             }
@@ -331,7 +372,7 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
             h("div", { class: "s-comments-filter-wrapper" }, h("label", { class: "s-comments-filter-label", htmlFor: "comments-filter" }, salla.lang.get('pages.categories.sorting')), h("select", { id: "comments-filter", "aria-label": salla.lang.get('pages.categories.sorting'), class: "s-form-control s-comments-sort-input", onChange: (e) => {
                     this.sort = e.target.value;
                     this.reload();
-                } }, h("option", { value: "latest", selected: true }, salla.lang.get("pages.testimonials.sort_by_date_desc")), h("option", { value: "oldest" }, salla.lang.get("pages.testimonials.sort_by_date_asc")), this.allowLikes && h("option", { value: "most_helpful" }, this.mostHelpfulLabel)))
+                } }, this.sortOptions.map(option => (h("option", { value: option.value, selected: option.selected }, option.label)))))
             : ''), h("div", { ref: wrapper => {
                 this.wrapper = wrapper;
             } }), this.nextPage && (h("div", { class: "s-infinite-scroll-wrapper", ref: status => {
@@ -359,12 +400,14 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
         "showPlaceholder": [32],
         "nextPage": [32],
         "mostHelpfulLabel": [32],
+        "verifiedPurchasesLabel": [32],
         "noComments": [32],
         "comment_title": [32],
         "comment_name": [32],
         "placeholder_text": [32],
         "showRatingSummary": [32],
         "allowLikes": [32],
+        "allowVerifiedPurchasesFilter": [32],
         "reload": [64]
     }, [[0, "commentAdded", "onCommentAdded"]]]);
 function defineCustomElement$1() {

package/dist/components/salla-gifting.js

@@ -626,7 +626,10 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
         }
     }
     handleUploadImage(img) {
-        this.uploadedImage = img;
+        // SP-22307: salla-file-upload emits {id, url} now (PR #2049); extract the url string the gift API expects.
+        // Single typeof guard narrows for tsc; the `img && img.url` short-circuit keeps null safe
+        // (typeof null === 'object', so null must NOT reach the bare `.url` access).
+        this.uploadedImage = typeof img !== 'object' ? img : (img && img.url);
         if (!!this.gift && this.gift.gift_images?.length) {
             this.setWrapperHeight(1, 150, 0);
         }
@@ -771,7 +774,7 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
     }
     render() {
         return [
-            h("div", { key: 'b4d479166a0a7a8b7bf4d66fd39399eef0bbe1d8' }, h("salla-list-tile", { key: 'a526748e500753bc4e132b6d8cc5fe56d276378c', class: this.generateClass() }, h("div", { key: '3756943a7292552172dfe5fe112a987f9dff2128', slot: "title" }, this.vertical ? h("span", { innerHTML: SIGiftSharing }) : '', h("h3", { key: '769df65a33828cdb51270438885bd7554a93b18b' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '69c51851715c12002d0d70f936852bf6b6a064a4', slot: "subtitle" }, h("div", { key: 'ee7979030a5756a4ad74c87cebdb595decc12d48' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '374d33078ca9e9f4d26bc801abcb50d8271887bf', slot: "action" }, h("salla-button", { key: 'f5c53ce21a6e058e484f941d356e1c74bf337b5f', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '2b57632750b91dc720605c181e19a0329c8db3e9', name: "widget-btn-content" }, h("div", { key: '1d43f1351bc3323118c8eace681f382b753d009b', class: "s-gifting-widget-action-content" }, h("span", { key: 'f62808df38d07bf5db9d54f24a64c103dbcca3c2', innerHTML: SIGiftSharing }), " \u00A0", h("span", { key: 'd22429956200e68c8d588d0daddae201963ba47a' }, this.sectionBtnText)))))), h("salla-modal", { key: '0e1614ad210647ac77bbeb7e19104f5b9ce3b6b3', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '230c00dd750aa31d20e450086b26c11094305e0f', slot: "loading" }, h("div", { key: 'cb48aec5cf71db50ba003cb3607c27e7a629e9be', class: "s-gifting-skeleton" }, h("div", { key: 'e7aa596896cb841628bf35b4b5d8c9d22ed84dae', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '8e6dff5462dc1644bd89e56d51b3a353341b1741', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '5bdf4f1266938b319a5d4642773cb0e8fa772f88', class: "s-gifting-modal-title" }, h("div", { key: '2e3ea0e2589152059ec71f0e0a0b6537b0d32d8f', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '7cf08110d0535ec7b719251cf54f3a83d940772f', height: '15px', width: '150px' })))), h("div", { key: '3e341993dd31be4bfbcc272877c8167f50233dd0', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '74b584687ed715146e84a7107fb69f18ea78f31d', height: '10px', width: '150px' }), h("salla-skeleton", { key: '8acfdd240b397ea8e0d6c93c745786c68eb34f25', height: '230px' }), h("salla-skeleton", { key: 'c92cef763f9d2857429919434a56bbc9686d6a3a', height: '10px', width: '150px' }), h("salla-skeleton", { key: '22e6c56dbabf3f90fa608dcd42d11b463ae86a1c', height: '30px' }), h("salla-skeleton", { key: '8093fcbc09362879ac5afb38f1910bdddfd41390', height: '40px' })))), h("slot", { key: '10842023d5a5861fa1562784c77f718c8e257d80', name: "header" }), !!this.hasError ?
+            h("div", { key: '3795180f3f719218220086c66f6bfbe6e57dc1d4' }, h("salla-list-tile", { key: 'cb9fd3e10b02bb429b25c028fcd2d328e73eab6e', class: this.generateClass() }, h("div", { key: 'cca448eae1144b0606bf8f07844974cd7f966236', slot: "title" }, this.vertical ? h("span", { innerHTML: SIGiftSharing }) : '', h("h3", { key: 'c33210bdf1a72cdf0151138ce2949fc462efaf94' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '007fc138265e6ab82dbdfab8169baa407b111e60', slot: "subtitle" }, h("div", { key: '89de9cc780511609d294f67a3d639a0305300b17' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'ea647e47079ab8e57580675f485bc99c2b213cd4', slot: "action" }, h("salla-button", { key: 'e87bcc03e5ab02204ca9f1d590421cae13282269', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: 'ce294391f8c18e345ec2117a15e2942dd00790fc', name: "widget-btn-content" }, h("div", { key: '7106257d9f44b869fcd3933ae8a1d2a50f4486dd', class: "s-gifting-widget-action-content" }, h("span", { key: '305822ae865b6da9275ced4600933d83d42e54e7', innerHTML: SIGiftSharing }), " \u00A0", h("span", { key: '13f2d03213e1fea9fe9911a94259b89085406ab3' }, this.sectionBtnText)))))), h("salla-modal", { key: 'b55185fbd34776043661ca6f15a739e34e98e0ef', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '9f59cea6e2835d80e24bc269b78a5bc47b354f6a', slot: "loading" }, h("div", { key: '3f74f3384be120a0733e921de696d2beeccd49ce', class: "s-gifting-skeleton" }, h("div", { key: 'e3ffb5b8d712bc391ad6b4190556ac870e37db0c', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'b9b154ab445516fa1fae66cc458dd68114024d9d', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '1ecf5c6ea1ebeccbd6ed7f259045647148863826', class: "s-gifting-modal-title" }, h("div", { key: '165d927a3bcaf47dd5c7657db8543ad02b47dc44', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'cba1667fa446566c5bc862c206313d8f48a0991e', height: '15px', width: '150px' })))), h("div", { key: 'f56f8e8820f789ca117a0e19cf660bc4d836ec6a', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '74b8cec4be6e18ec8a1b340d8fed0b2d136bb1d3', height: '10px', width: '150px' }), h("salla-skeleton", { key: '5c615a0c0eb72908e601c2cfd28fe12a6391ef80', height: '230px' }), h("salla-skeleton", { key: '5c432b6e3f8c70574e1d05d26f57443ff5da45fe', height: '10px', width: '150px' }), h("salla-skeleton", { key: '7f5d7ec5cf3ef50f945e2a57363ac215e41f306b', height: '30px' }), h("salla-skeleton", { key: '47c0e823643dc9c2d4908dde353adf5b0e4355ad', height: '40px' })))), h("slot", { key: '3ad3a57a07cb8182e5cd86783ba19c8ae8f34d3b', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
@@ -794,7 +797,7 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
                             h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-city` }, this.receiverCityFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectCity, items: this.displayedCities, selectedItem: this.selectedCity, loading: this.loadingCities, searching: this.searchingCities, disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId), required: true, inputId: `${this.hostId}-city`, searchQuery: this.citySearchQuery, clientSearch: !this.enableCityAjaxSearch, dropUp: true, keepParentScroll: true, onItemSelected: (e) => this.handleCitySelected(e.detail), onSearchInput: (e) => this.handleCitySearch(e.detail), onDropdownClosed: () => this.handleCityDropdownClosed() }), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.isPhysical() && this.cityNoticeText() &&
                             h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.cityNoticeText())), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, !this.skipStep1() && h("a", { href: "#!", innerHTML: IconArrowLeft, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: 'ba5b5cc6e2b20d756ed5149757b23239455939f7', name: "footer" })))
+                    ], h("slot", { key: '4b5e340be26e46c09508d192207fa6af9ec0cc44', name: "footer" })))
         ];
     }
     static get style() { return sallaGiftingCss; }

package/dist/components/salla-modal2.js

@@ -10,7 +10,7 @@ import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$2 } from './salla-button2.js';
 import { d as defineCustomElement$1 } from './salla-loading2.js';
 
-const sallaModalCss = "/*!twlt*/@media screen and (max-width: 470px){.modal-is-open{position:fixed;width:100%}}.s-modal-back{position:absolute;top:0.35rem;inset-inline-start:0.35rem;z-index:1;margin:0 !important;line-height:0}.s-modal-back .s-button-element,.s-modal-back .s-button-icon{margin:0 !important}.visible{visibility:visible}.hidden{display:none}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.s-hidden{display:none}.s-booking-field-modal .s-modal-body{overflow:hidden;padding:1.25rem}.s-booking-field-modal .s-modal-title{display:flex;justify-content:flex-start}.s-bottom-alert-modal .s-modal-body{padding-top:1rem;padding-bottom:1rem}.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body{padding:0px}@media (min-width: 768px){.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body{max-height:70dvh;overflow-y:auto}}.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open){overflow:visible !important}.s-comments-item-images-slider .s-modal-close{background-color:transparent}.s-delivery-promise-city-modal .s-modal-title{font-weight:700;color:var(--color-primary,#00897b)}.s-delivery-promise-city-modal .s-modal-sub-title{font-size:0.875rem;line-height:1.25rem;line-height:1.45;color:var(--color-text-secondary,#5c6c7c)}.s-delivery-promise-city-modal .s-modal-body{overflow:visible !important}.s-delivery-promise-city-modal .s-modal-body>salla-button{position:relative;z-index:0;margin-top:1rem}.s-gifting-modal .s-modal-header{display:block}.s-gifting-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;padding-bottom:2rem}@media (min-width: 640px){.s-gifting-modal .s-modal-body{padding-bottom:1.5rem}}@media (max-width: 768px){.s-loyalty-modal .s-modal-body{max-height:100%;overflow-y:scroll}}.s-modal-container{position:fixed;inset:0px;z-index:200;overflow:hidden}.s-modal-wrapper{height:100%;overflow-y:auto;text-align:center}.s-modal-loader{margin-left:0.5rem;margin-right:0.5rem;display:flex;align-items:center;justify-content:center;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-modal-loader::before{display:inline-block;height:2.5rem;content:var(--tw-content);width:2.5rem}@keyframes spin{to{content:var(--tw-content);transform:rotate(360deg)}}.s-modal-loader::before{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;border-style:solid;border-top-color:var(--color-primary);border-left-color:var(--color-primary);border-bottom-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-border-opacity:1;border-right-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-content:'';content:var(--tw-content)}.s-modal-close{position:absolute;top:0.75rem;z-index:10;width:2.75rem;cursor:pointer;border-style:none;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:0.5rem;padding-right:0.5rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-modal-close:focus{outline:2px solid transparent;outline-offset:2px}.s-modal-close:where([dir=\"ltr\"],[dir=\"ltr\"] *){right:0px}.s-modal-close:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:0px}.s-modal-close svg{width:1.25rem;fill:#f87171}.s-modal-close svg:hover{fill:#ef4444}.s-modal-header{flex-direction:column}.s-modal-header-inner{margin-bottom:1.25rem;display:flex;align-items:center;padding-right:2rem;text-align:center}@media (min-width: 640px){.s-modal-header-inner{display:block}}@media (min-width: 768px){.s-modal-header-inner{padding:0px !important}}.s-modal-header-inner:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-left:2rem;padding-right:0px}.s-modal-header-content{display:flex;flex-direction:column;text-align:left}@media (min-width: 768px){.s-modal-header-content{text-align:center}}.s-modal-header-content:where([dir=\"rtl\"],[dir=\"rtl\"] *){text-align:right}@media (min-width: 768px){.s-modal-header-content:where([dir=\"rtl\"],[dir=\"rtl\"] *){text-align:center}}.s-modal-header-img{margin-left:auto;margin-right:auto;max-width:150px}@media (min-width: 640px){.s-modal-header-img{margin-bottom:1rem}}.s-modal-icon{display:inline-flex;height:4rem;width:4rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));font-size:1.875rem;line-height:2.25rem}@media (min-width: 640px){.s-modal-icon{margin-left:auto;margin-right:auto;margin-bottom:1rem;height:5rem;width:5rem}}.s-modal-icon:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-right:0.5rem}@media (min-width: 640px){.s-modal-icon:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-right:0px}}.s-modal-icon:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:0.5rem}@media (min-width: 640px){.s-modal-icon:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:0px}}.s-modal-icon svg{fill:#9ca3af}.s-modal-bg-normal{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.s-modal-bg-success{--tw-border-opacity:1;border-color:rgb(134 239 172 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))}.s-modal-bg-success svg{fill:#16a34a}.s-modal-bg-error{--tw-border-opacity:1;border-color:rgb(252 165 165 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1))}.s-modal-bg-error svg{fill:#dc2626}.s-modal-bg-primary{border-color:var(--color-primary);background-color:var(--color-primary)}.s-modal-bg-primary svg{fill:var(--color-primary-reverse)}.s-modal-title{font-size:1.125rem;font-weight:700;line-height:1.5rem;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.s-modal-title{margin-bottom:0.5rem}}.s-modal-sub-title{font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.s-modal-sub-title{margin-bottom:0.5rem}}.s-modal-title-below{order:10}.s-modal-body-slot{width:100%}.s-modal-body{position:fixed;left:0px;bottom:0px;display:inline-block;width:100%;--tw-translate-y:1rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));overflow:hidden;border-radius:var(--s-radius, 0.25rem);border-bottom-right-radius:0px;border-bottom-left-radius:0px;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;transition-timing-function:cubic-bezier(0.4, 0, 1, 1)}@media (min-width: 640px){.s-modal-body{position:relative;margin-top:2rem;margin-bottom:2rem;--tw-translate-y:0px;--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));overflow:visible;border-bottom-right-radius:var(--s-radius, 0.25rem);border-bottom-left-radius:var(--s-radius, 0.25rem)}}@media (min-width: 768px){.s-modal-body{left:unset;bottom:unset}}.s-modal-body:where([dir=\"ltr\"],[dir=\"ltr\"] *){text-align:left}.s-modal-body:where([dir=\"rtl\"],[dir=\"rtl\"] *){text-align:right}.s-modal-padding{padding:1rem;padding-top:1.5rem}@media (min-width: 640px){.s-modal-padding{padding:1.5rem}}.s-modal-spacer{display:inline-block;height:100vh}.s-modal-align-middle{vertical-align:bottom}@media (min-width: 640px){.s-modal-align-middle{vertical-align:middle}}.s-modal-align-top{vertical-align:bottom}@media (min-width: 640px){.s-modal-align-top{vertical-align:top}}.s-modal-align-bottom{vertical-align:bottom}.s-modal-overlay{position:fixed;inset:0px;background-color:rgb(107 114 128 / var(--tw-bg-opacity, 1));--tw-bg-opacity:0.75;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;transition-timing-function:cubic-bezier(0.4, 0, 1, 1)}.s-modal-overlay-leaving{opacity:0}.s-modal-entering{--tw-translate-y:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}@media (min-width: 640px){.s-modal-entering{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}.s-modal-leaving{--tw-translate-y:1rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}@media (min-width: 640px){.s-modal-leaving{--tw-translate-y:0px;--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}.s-modal-is-center{align-items:center}@media (min-width: 640px){.s-modal-is-center{text-align:center}.s-modal-xs{max-width:380px}.s-modal-sm{max-width:480px}}@media (min-width: 768px){.s-modal-md{max-width:768px}}.s-modal-lg{max-width:992px}.s-modal-xl{max-width:1280px}.s-modal-full{height:100%;width:100%}@media (min-width: 768px){.s-modal-full{height:calc(100% - 70px);width:calc(100% - 70px)}}@media (min-width: 640px){.s-modal-auto{width:fit-content !important;max-width:90vw}}.s-offer-modal-type-discounts-table .s-modal-body{position:relative !important}salla-modal.s-order-cancel-modal .s-modal-body{display:inline-flex;max-height:100svh;flex-direction:column;overflow:hidden;text-align:start}@media (min-width: 768px){salla-modal.s-order-cancel-modal .s-modal-body{max-height:92svh}}salla-modal.s-order-cancel-modal .s-modal-header{width:100%;flex-shrink:0;align-items:flex-start;text-align:start}salla-modal.s-order-cancel-modal .s-modal-header-inner{margin-bottom:1.25rem;display:block !important;width:100%;padding-inline-end:2.5rem;padding-inline-start:0px;text-align:start}@media (min-width: 768px){salla-modal.s-order-cancel-modal .s-modal-header-inner{padding:0px}}salla-modal.s-order-cancel-modal .s-modal-header-inner:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-inline-start:2.5rem;padding-inline-end:0px}salla-modal.s-order-cancel-modal .s-modal-header-content{width:100%;align-items:flex-start;text-align:start}salla-modal.s-order-cancel-modal .s-modal-title{margin-bottom:0px;width:100%;text-align:start;font-size:1.125rem;line-height:1.75rem;font-weight:700;--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.s-product-size-guide-wrapper .s-modal-title{margin-bottom:0px !important}.s-rating-modal-wrap .s-modal-body{position:relative !important}.s-scopes-modal .s-modal-header{display:block !important}.s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}.s-search-modal .s-modal-spacer{display:inline}.s-search-modal .s-modal-body{padding:0;width:700px;max-width:90%;margin-top:3.2rem;border-radius:0.5rem;background:transparent;overflow:visible;position:relative !important}.s-search-modal .s-modal-close{top:50%;transform:translateY(-50%)}";
+const sallaModalCss = "/*!twlt*/@media screen and (max-width: 470px){.modal-is-open{position:fixed;width:100%}}@media screen and (max-width: 639px){.s-modal-body{max-height:calc(100vh - 2rem) !important;overflow-y:auto !important;overflow-x:hidden !important}}.s-modal-back{position:absolute;top:0.35rem;inset-inline-start:0.35rem;z-index:1;margin:0 !important;line-height:0}.s-modal-back .s-button-element,.s-modal-back .s-button-icon{margin:0 !important}.visible{visibility:visible}.hidden{display:none}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.s-hidden{display:none}.s-booking-field-modal .s-modal-body{overflow:hidden;padding:1.25rem}.s-booking-field-modal .s-modal-title{display:flex;justify-content:flex-start}.s-bottom-alert-modal .s-modal-body{padding-top:1rem;padding-bottom:1rem}.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body{padding:0px}@media (min-width: 768px){.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body{max-height:70dvh;overflow-y:auto}}.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open){overflow:visible !important}.s-comments-item-images-slider .s-modal-close{background-color:transparent}.s-delivery-promise-city-modal .s-modal-title{font-weight:700;color:var(--color-primary,#00897b)}.s-delivery-promise-city-modal .s-modal-sub-title{font-size:0.875rem;line-height:1.25rem;line-height:1.45;color:var(--color-text-secondary,#5c6c7c)}.s-delivery-promise-city-modal .s-modal-body{overflow:visible !important}.s-delivery-promise-city-modal .s-modal-body>salla-button{position:relative;z-index:0;margin-top:1rem}.s-gifting-modal .s-modal-header{display:block}.s-gifting-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;padding-bottom:2rem}@media (min-width: 640px){.s-gifting-modal .s-modal-body{padding-bottom:1.5rem}}@media (max-width: 768px){.s-loyalty-modal .s-modal-body{max-height:100%;overflow-y:scroll}}.s-modal-container{position:fixed;inset:0px;z-index:200;overflow:hidden}.s-modal-wrapper{height:100%;overflow-y:auto;text-align:center}.s-modal-loader{margin-left:0.5rem;margin-right:0.5rem;display:flex;align-items:center;justify-content:center;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-modal-loader::before{display:inline-block;height:2.5rem;content:var(--tw-content);width:2.5rem}@keyframes spin{to{content:var(--tw-content);transform:rotate(360deg)}}.s-modal-loader::before{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;border-style:solid;border-top-color:var(--color-primary);border-left-color:var(--color-primary);border-bottom-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-border-opacity:1;border-right-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-content:'';content:var(--tw-content)}.s-modal-close{position:absolute;top:0.75rem;z-index:10;width:2.75rem;cursor:pointer;border-style:none;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:0.5rem;padding-right:0.5rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-modal-close:focus{outline:2px solid transparent;outline-offset:2px}.s-modal-close:where([dir=\"ltr\"],[dir=\"ltr\"] *){right:0px}.s-modal-close:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:0px}.s-modal-close svg{width:1.25rem;fill:#f87171}.s-modal-close svg:hover{fill:#ef4444}.s-modal-header{flex-direction:column}.s-modal-header-inner{margin-bottom:1.25rem;display:flex;align-items:center;padding-right:2rem;text-align:center}@media (min-width: 640px){.s-modal-header-inner{display:block}}@media (min-width: 768px){.s-modal-header-inner{padding:0px !important}}.s-modal-header-inner:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-left:2rem;padding-right:0px}.s-modal-header-content{display:flex;flex-direction:column;text-align:left}@media (min-width: 768px){.s-modal-header-content{text-align:center}}.s-modal-header-content:where([dir=\"rtl\"],[dir=\"rtl\"] *){text-align:right}@media (min-width: 768px){.s-modal-header-content:where([dir=\"rtl\"],[dir=\"rtl\"] *){text-align:center}}.s-modal-header-img{margin-left:auto;margin-right:auto;max-width:150px}@media (min-width: 640px){.s-modal-header-img{margin-bottom:1rem}}.s-modal-icon{display:inline-flex;height:4rem;width:4rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-style:solid;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));font-size:1.875rem;line-height:2.25rem}@media (min-width: 640px){.s-modal-icon{margin-left:auto;margin-right:auto;margin-bottom:1rem;height:5rem;width:5rem}}.s-modal-icon:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-right:0.5rem}@media (min-width: 640px){.s-modal-icon:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-right:0px}}.s-modal-icon:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:0.5rem}@media (min-width: 640px){.s-modal-icon:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:0px}}.s-modal-icon svg{fill:#9ca3af}.s-modal-bg-normal{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.s-modal-bg-success{--tw-border-opacity:1;border-color:rgb(134 239 172 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))}.s-modal-bg-success svg{fill:#16a34a}.s-modal-bg-error{--tw-border-opacity:1;border-color:rgb(252 165 165 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1))}.s-modal-bg-error svg{fill:#dc2626}.s-modal-bg-primary{border-color:var(--color-primary);background-color:var(--color-primary)}.s-modal-bg-primary svg{fill:var(--color-primary-reverse)}.s-modal-title{font-size:1.125rem;font-weight:700;line-height:1.5rem;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.s-modal-title{margin-bottom:0.5rem}}.s-modal-sub-title{font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.s-modal-sub-title{margin-bottom:0.5rem}}.s-modal-title-below{order:10}.s-modal-body-slot{width:100%}.s-modal-body{position:fixed;left:0px;bottom:0px;display:inline-block;width:100%;--tw-translate-y:1rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));overflow:hidden;border-radius:var(--s-radius, 0.25rem);border-bottom-right-radius:0px;border-bottom-left-radius:0px;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;transition-timing-function:cubic-bezier(0.4, 0, 1, 1)}@media (min-width: 640px){.s-modal-body{position:relative;margin-top:2rem;margin-bottom:2rem;--tw-translate-y:0px;--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));overflow:visible;border-bottom-right-radius:var(--s-radius, 0.25rem);border-bottom-left-radius:var(--s-radius, 0.25rem)}}@media (min-width: 768px){.s-modal-body{left:unset;bottom:unset}}.s-modal-body:where([dir=\"ltr\"],[dir=\"ltr\"] *){text-align:left}.s-modal-body:where([dir=\"rtl\"],[dir=\"rtl\"] *){text-align:right}.s-modal-padding{padding:1rem;padding-top:1.5rem}@media (min-width: 640px){.s-modal-padding{padding:1.5rem}}.s-modal-spacer{display:inline-block;height:100vh}.s-modal-align-middle{vertical-align:bottom}@media (min-width: 640px){.s-modal-align-middle{vertical-align:middle}}.s-modal-align-top{vertical-align:bottom}@media (min-width: 640px){.s-modal-align-top{vertical-align:top}}.s-modal-align-bottom{vertical-align:bottom}.s-modal-overlay{position:fixed;inset:0px;background-color:rgb(107 114 128 / var(--tw-bg-opacity, 1));--tw-bg-opacity:0.75;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;transition-timing-function:cubic-bezier(0.4, 0, 1, 1)}.s-modal-overlay-leaving{opacity:0}.s-modal-entering{--tw-translate-y:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}@media (min-width: 640px){.s-modal-entering{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}.s-modal-leaving{--tw-translate-y:1rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0}@media (min-width: 640px){.s-modal-leaving{--tw-translate-y:0px;--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}.s-modal-is-center{align-items:center}@media (min-width: 640px){.s-modal-is-center{text-align:center}.s-modal-xs{max-width:380px}.s-modal-sm{max-width:480px}}@media (min-width: 768px){.s-modal-md{max-width:768px}}.s-modal-lg{max-width:992px}.s-modal-xl{max-width:1280px}.s-modal-full{height:100%;width:100%}@media (min-width: 768px){.s-modal-full{height:calc(100% - 70px);width:calc(100% - 70px)}}@media (min-width: 640px){.s-modal-auto{width:fit-content !important;max-width:90vw}.s-modal-custom{max-width:min(var(--s-modal-custom-width), 90vw) !important;width:var(--s-modal-custom-width) !important}}.s-offer-modal-type-discounts-table .s-modal-body{position:relative !important}salla-modal.s-order-cancel-modal .s-modal-body{display:inline-flex;max-height:100svh;flex-direction:column;overflow:hidden;text-align:start}@media (min-width: 768px){salla-modal.s-order-cancel-modal .s-modal-body{max-height:92svh}}salla-modal.s-order-cancel-modal .s-modal-header{width:100%;flex-shrink:0;align-items:flex-start;text-align:start}salla-modal.s-order-cancel-modal .s-modal-header-inner{margin-bottom:1.25rem;display:block !important;width:100%;padding-inline-end:2.5rem;padding-inline-start:0px;text-align:start}@media (min-width: 768px){salla-modal.s-order-cancel-modal .s-modal-header-inner{padding:0px}}salla-modal.s-order-cancel-modal .s-modal-header-inner:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-inline-start:2.5rem;padding-inline-end:0px}salla-modal.s-order-cancel-modal .s-modal-header-content{width:100%;align-items:flex-start;text-align:start}salla-modal.s-order-cancel-modal .s-modal-title{margin-bottom:0px;width:100%;text-align:start;font-size:1.125rem;line-height:1.75rem;font-weight:700;--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.s-product-size-guide-wrapper .s-modal-title{margin-bottom:0px !important}.s-rating-modal-wrap .s-modal-body{position:relative !important}.s-scopes-modal .s-modal-header{display:block !important}.s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}.s-search-modal .s-modal-spacer{display:inline}.s-search-modal .s-modal-body{padding:0;width:700px;max-width:90%;margin-top:3.2rem;border-radius:0.5rem;background:transparent;overflow:visible;position:relative !important}.s-search-modal .s-modal-close{top:50%;transform:translateY(-50%)}";
 
 const SallaModal = /*@__PURE__*/ proxyCustomElement(class SallaModal extends HTMLElement {
     constructor() {
@@ -23,9 +23,13 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class SallaModal extends HTM
          */
         this.isClosable = true; //todo::rename unclude. Suggestion => persistent
         /**
-         * The size of the modal
+         * The size of the modal. Use `custom` along with `customWidth` to set an arbitrary max-width.
          */
         this.width = 'md';
+        /**
+         * Custom max-width to apply when `width` is set to `custom`, e.g. `600px` or `40rem`.
+         */
+        this.customWidth = undefined;
         /**
          * The position of the modal
          */
@@ -162,6 +166,9 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class SallaModal extends HTM
     getWidth() {
         return this.isLoading ? (this.hasSkeleton ? 'md' : 'xs') : this.width;
     }
+    getCustomWidthStyle() {
+        return this.getWidth() === 'custom' && this.customWidth ? { '--s-modal-custom-width': this.customWidth } : {};
+    }
     getBackIcon() {
         return document.documentElement.getAttribute('dir') === 'rtl' ? arrowRight : IconArrowLeft;
     }
@@ -169,9 +176,9 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class SallaModal extends HTM
     render() {
         this.host.id = this.host.id || 'salla-modal';
         if (this.isLoading) {
-            return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog", onKeyUp: e => this.handleKeyUp(e) }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("slot", { name: "loading" }, h("salla-loading", null)), h("div", { class: "s-hidden" }, h("slot", null))))));
+            return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog", onKeyUp: e => this.handleKeyUp(e) }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding'), style: this.getCustomWidthStyle() }, h("slot", { name: "loading" }, h("salla-loading", null)), h("div", { class: "s-hidden" }, h("slot", null))))));
         }
-        return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.centered } }, this.showBack ?
+        return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding'), style: this.getCustomWidthStyle() }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.centered } }, this.showBack ?
             h("salla-button", { class: "s-modal-back", shape: "icon", color: "light", size: "medium", "aria-label": "Back", onClick: () => this.handleBack() }, h("span", { innerHTML: this.getBackIcon() }))
             : '', this.isClosable ?
             h("button", { class: "s-modal-close", onClick: () => this.closeModal("closeButtonClick"), type: "button" }, h("span", { innerHTML: Cancel }))
@@ -193,6 +200,7 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class SallaModal extends HTM
 }, [4, "salla-modal", {
         "isClosable": [1028, "is-closable"],
         "width": [513],
+        "customWidth": [1, "custom-width"],
         "position": [513],
         "visible": [516],
         "hasSkeleton": [516, "has-skeleton"],