@salla.sa/twilight-components 2.14.540 → 2.14.541

package/dist/collection/components/salla-attachments/salla-attachments.js

@@ -0,0 +1,375 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, Host } from "@stencil/core";
+import { isVideoMimeType, isImageMimeType } from "../salla-file-upload/upload-limits";
+import PlayIcon from "../../assets/svg/play-circle.svg";
+/**
+ * Renders a horizontal strip of image/video attachment thumbnails with an
+ * optional "+N" overflow indicator on the last visible item. When `clickable`
+ * is true, opens `salla-attachment-view` when a thumbnail is clicked.
+ *
+ * Media can be supplied as:
+ * - `attachments` — full `{ id, url, mimeType?/type? }` objects
+ * - `images` / `videos` — URL string arrays
+ * - `rating` — object with `images` / `videos` arrays
+ * - `productRatings` + `productId` — match a product rating, else fall back to `rating`
+ */
+export class SallaAttachments {
+    constructor() {
+        /**
+         * Attachments to display. Accepts an array of `{ id, url, mimeType? }` or a
+         * JSON string of the same shape.
+         */
+        this.attachments = [];
+        /**
+         * Image URLs to display. Accepts a string array or a JSON string.
+         */
+        this.images = [];
+        /**
+         * Video URLs to display. Accepts a string array or a JSON string.
+         */
+        this.videos = [];
+        /**
+         * Rating-like object with `images` / `videos` URL arrays. Used when
+         * `images`/`videos` are empty, and as a fallback when resolving
+         * `productRatings`.
+         */
+        this.rating = null;
+        /**
+         * Product ratings list. When set with `productId`, the matching rating's
+         * media is preferred over `rating`.
+         */
+        this.productRatings = [];
+        /**
+         * Product id used to match an entry in `productRatings`.
+         */
+        this.productId = null;
+        /**
+         * Maximum number of thumbnails to show before displaying a "+N" overlay on
+         * the last visible item.
+         */
+        this.maxVisible = 4;
+        /**
+         * When true, clicking a thumbnail opens the attachment lightbox.
+         */
+        this.clickable = false;
+    }
+    parseJson(value, fallback) {
+        if (typeof value !== 'string') {
+            return (value ?? fallback);
+        }
+        try {
+            return JSON.parse(value);
+        }
+        catch {
+            return fallback;
+        }
+    }
+    parseStringList(value) {
+        const parsed = this.parseJson(value, []);
+        return Array.isArray(parsed) ? parsed.filter(url => typeof url === 'string' && url) : [];
+    }
+    parseMediaSource(value) {
+        if (!value)
+            return null;
+        const parsed = this.parseJson(value, null);
+        return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : null;
+    }
+    parseMediaSourceList(value) {
+        const parsed = this.parseJson(value, []);
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    resolveMediaSource() {
+        const images = this.parseStringList(this.images);
+        const videos = this.parseStringList(this.videos);
+        if (images.length || videos.length) {
+            return { images, videos };
+        }
+        const rating = this.parseMediaSource(this.rating);
+        const productRatings = this.parseMediaSourceList(this.productRatings);
+        const productId = this.productId == null || this.productId === ''
+            ? null
+            : String(this.productId);
+        if (productId && productRatings.length) {
+            const matched = productRatings.find(entry => entry?.product?.id != null && String(entry.product.id) === productId);
+            if (matched)
+                return matched;
+        }
+        return rating || { images: [], videos: [] };
+    }
+    mediaToAttachments(source) {
+        const images = (source.images || []).map(url => ({ type: 'image', url }));
+        const videos = (source.videos || []).map(url => ({ type: 'video', url }));
+        return [...images, ...videos];
+    }
+    getAttachments() {
+        let items = [];
+        if (typeof this.attachments === 'string') {
+            try {
+                const parsed = JSON.parse(this.attachments);
+                items = Array.isArray(parsed) ? parsed : [];
+            }
+            catch {
+                items = [];
+            }
+        }
+        else if (Array.isArray(this.attachments)) {
+            items = this.attachments;
+        }
+        if (!items.length) {
+            items = this.mediaToAttachments(this.resolveMediaSource());
+        }
+        return items
+            .map((attachment, index) => this.normalizeAttachment(attachment, index))
+            .filter(attachment => this.isRenderableAttachment(attachment));
+    }
+    normalizeAttachment(attachment, index) {
+        const mimeType = attachment.mimeType || this.resolveMimeType(attachment.type, attachment.url);
+        return {
+            id: attachment.id || `attachment-${index}`,
+            url: attachment.url,
+            mimeType,
+        };
+    }
+    resolveMimeType(type, url) {
+        if (type === 'image')
+            return 'image/jpeg';
+        if (type === 'video')
+            return 'video/mp4';
+        if (type?.includes('/'))
+            return type;
+        if (url && /\.(png|jpe?g|gif|webp|heic|heif)$/i.test(url))
+            return 'image/jpeg';
+        if (url && /\.(mp4|webm|mov|avi|mkv)$/i.test(url))
+            return 'video/mp4';
+        return type;
+    }
+    isRenderableAttachment(attachment) {
+        return isImageMimeType(attachment.mimeType, attachment.url)
+            || isVideoMimeType(attachment.mimeType, attachment.url);
+    }
+    isVideo(attachment) {
+        return isVideoMimeType(attachment.mimeType, attachment.url);
+    }
+    openAt(index) {
+        if (!this.clickable)
+            return;
+        this.attachmentView?.open(index);
+    }
+    render() {
+        const items = this.getAttachments();
+        if (!items.length)
+            return null;
+        const visible = items.slice(0, this.maxVisible);
+        const remaining = items.length - this.maxVisible;
+        return (h(Host, null, h("div", { class: {
+                's-attachments': true,
+                'is-clickable': this.clickable,
+            } }, visible.map((attachment, index) => {
+            const isLastVisible = index === this.maxVisible - 1;
+            const showMoreOverlay = isLastVisible && remaining > 0;
+            const thumbProps = this.clickable
+                ? { onClick: () => this.openAt(index) }
+                : {};
+            return this.isVideo(attachment)
+                ? h("div", { key: attachment.id, class: "s-attachments-video-thumb", ...thumbProps }, h("video", { src: attachment.url, muted: true, playsInline: true, preload: "metadata" }), showMoreOverlay
+                    ? h("span", { class: "s-attachments-more-overlay" }, "+", remaining)
+                    : h("span", { class: "s-attachments-video-thumb-play", innerHTML: PlayIcon }))
+                : h("div", { key: attachment.id, class: "s-attachments-image-thumb", ...thumbProps }, h("img", { src: attachment.url, alt: "" }), showMoreOverlay
+                    ? h("span", { class: "s-attachments-more-overlay" }, "+", remaining)
+                    : null);
+        }), this.clickable && (h("salla-attachment-view", { ref: el => (this.attachmentView = el), attachments: items })))));
+    }
+    static get is() { return "salla-attachments"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-attachments.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-attachments.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "attachments": {
+                "type": "string",
+                "attribute": "attachments",
+                "mutable": false,
+                "complexType": {
+                    "original": "Attachment[] | string",
+                    "resolved": "Attachment[] | string",
+                    "references": {
+                        "Attachment": {
+                            "location": "import",
+                            "path": "../salla-attachment-view/salla-attachment-view",
+                            "id": "src/components/salla-attachment-view/salla-attachment-view.tsx::Attachment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Attachments to display. Accepts an array of `{ id, url, mimeType? }` or a\nJSON string of the same shape."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "images": {
+                "type": "string",
+                "attribute": "images",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URLs to display. Accepts a string array or a JSON string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "videos": {
+                "type": "string",
+                "attribute": "videos",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Video URLs to display. Accepts a string array or a JSON string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "rating": {
+                "type": "string",
+                "attribute": "rating",
+                "mutable": false,
+                "complexType": {
+                    "original": "MediaSource | string",
+                    "resolved": "string | { images?: string[]; videos?: string[]; product?: { id?: string | number; }; }",
+                    "references": {
+                        "MediaSource": {
+                            "location": "global",
+                            "id": "global::MediaSource"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Rating-like object with `images` / `videos` URL arrays. Used when\n`images`/`videos` are empty, and as a fallback when resolving\n`productRatings`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "productRatings": {
+                "type": "string",
+                "attribute": "product-ratings",
+                "mutable": false,
+                "complexType": {
+                    "original": "MediaSource[] | string",
+                    "resolved": "MediaSource[] | string",
+                    "references": {
+                        "MediaSource": {
+                            "location": "global",
+                            "id": "global::MediaSource"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Product ratings list. When set with `productId`, the matching rating's\nmedia is preferred over `rating`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "productId": {
+                "type": "any",
+                "attribute": "product-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Product id used to match an entry in `productRatings`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "maxVisible": {
+                "type": "number",
+                "attribute": "max-visible",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of thumbnails to show before displaying a \"+N\" overlay on\nthe last visible item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "clickable": {
+                "type": "boolean",
+                "attribute": "clickable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, clicking a thumbnail opens the attachment lightbox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/salla-comments/salla-comment-item.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h, Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import CheckIcon from "../../assets/svg/check.svg";
 import Reply from "../../assets/svg/reply.svg";
 import ThumbsUp from "../../assets/svg/thumbs-up.svg";
@@ -15,6 +15,7 @@ export class SallaCommentItem {
         this.has_order_trans = salla.lang.get('blocks.comments.has_order');
         this.allowLikes = salla.config.get('store.settings.rating.allow_likes');
         this.allowAttachImages = salla.config.get('store.settings.rating.allow_attach_images');
+        this.allowAttachVideos = salla.config.get('store.settings.rating.allow_attach_videos');
         this.helpfulLabel = salla.lang.get('blocks.comments.helpful');
         this.reviewDetailsLabel = salla.lang.get('blocks.comments.review_details');
         this.likesCount = 0;
@@ -61,10 +62,15 @@ export class SallaCommentItem {
             salla.log('Bad json for liked_comments');
         }
     }
-    ;
     getReplies() {
         return Array.isArray(this.comment.replies) ? this.comment.replies : [this.comment.replies];
     }
+    getImages() {
+        return this.allowAttachImages && Array.isArray(this.comment.images) ? this.comment.images : [];
+    }
+    getVideos() {
+        return this.allowAttachVideos && Array.isArray(this.comment.videos) ? this.comment.videos : [];
+    }
     getDate(dateString) {
         const [datePart] = dateString.split(' ');
         const [year, month, day] = datePart.split('-');
@@ -146,6 +152,9 @@ export class SallaCommentItem {
             return null;
         }
         let isAdmin = this.comment.type == 'admin';
+        const images = this.getImages();
+        const videos = this.getVideos();
+        const hasAttachments = images.length > 0 || videos.length > 0;
         const reviewFactors = this.getReviewFactors();
         const hasReviewFactors = reviewFactors.length > 0;
         return (h(Host, { class: isAdmin ? 's-comments-item-admin' : 's-comments-item' }, h("div", { class: { "s-comments-item-wrapper": !isAdmin, "s-comments-item-admin-wrapper": isAdmin }, id: `s-comments-item-${this.comment.id}` }, h("div", { class: "s-comments-item-inner s-comments-flex-1" }, isAdmin && h("span", { class: "s-comments-item-reply-icon", innerHTML: Reply }), h("div", { class: "s-comments-item-avatar" }, h("img", { "data-src": this.comment?.avatar, alt: this.comment?.name, src: this.comment?.avatar, class: "s-comments-item-avatar-img lazy" })), h("div", { class: "s-comments-flex-1" }, h("div", { class: "s-comments-item-user-wrapper" }, h("div", { class: "s-comments-item-user-info" }, h("h3", { class: this.comment.is_pinned ? "s-comments-item-user-info-name" : "s-comments-item-user-info-name-with-margin" }, this.comment?.name), this.comment.is_pinned ?
@@ -157,7 +166,7 @@ export class SallaCommentItem {
             : 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,
-            } }, "\u2303"))))), h("div", { class: "s-comments-item-content" }, hasReviewFactors && this.showReviewFactors && (h("salla-comment-factors", { factors: reviewFactors })), h("div", { class: "s-comments-item-content-container" }, this.isPrivateComment(this.comment) ? (h("div", { id: `s-comments-item-${this.comment.id}-locked-icon`, class: "s-comments-item-pinned-icon" }, this.LockedIcon())) : null, h("p", { innerHTML: this.comment.content })), this.isPrivateComment(this.comment) ? (h("salla-tooltip", { text: this.locked_trans, targetId: `s-comments-item-${this.comment.id}-locked-icon` })) : null, this.allowAttachImages && h("div", { class: "s-comments-item-images" }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "", onClick: () => this.modal.open() }))), h("salla-modal", { ref: modal => this.modal = modal, width: "sm" }, h("salla-slider", { id: `s-comments-item-${this.comment.id}-images`, class: "s-comments-item-images-slider", type: "thumbs", "auto-height": true, showControls: this.comment.images.length > 1 ? true : false, "show-thumbs-controls": "false" }, h("div", { slot: 'items' }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "" })))), h("div", { slot: "thumbs" }, this.comment.images.map((image, index) => (h("div", { class: "s-comments-item-images-slider-thumb" }, h("img", { key: index, src: image, alt: "" })))))))), this.allowLikes && !isAdmin && !!this.comment.id && salla.url.is_page('product.single') ? h("salla-button", { ref: el => this.likeBtn = el, class: `s-comments-item-like-btn ${this.likedComments.includes(this.comment.id) ? 'liked' : ''}`, loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleLike() }, h("span", null, this.helpfulLabel, " ", this.likesCount > 0 ? `(${this.likesCount})` : ''), h("span", { innerHTML: ThumbsUp })) : '', this.comment.is_pending ?
+            } }, "\u2303"))))), h("div", { class: "s-comments-item-content" }, hasReviewFactors && this.showReviewFactors && (h("salla-comment-factors", { factors: reviewFactors })), h("div", { class: "s-comments-item-content-container" }, this.isPrivateComment(this.comment) ? (h("div", { id: `s-comments-item-${this.comment.id}-locked-icon`, class: "s-comments-item-pinned-icon" }, this.LockedIcon())) : null, h("p", { innerHTML: this.comment.content })), this.isPrivateComment(this.comment) ? (h("salla-tooltip", { text: this.locked_trans, targetId: `s-comments-item-${this.comment.id}-locked-icon` })) : null, hasAttachments && (h("div", { class: "mt-6 mb-4" }, h("salla-attachments", { images: images, videos: videos, clickable: true }))), this.allowLikes && !isAdmin && !!this.comment.id && salla.url.is_page('product.single') ? h("salla-button", { ref: el => this.likeBtn = el, class: `s-comments-item-like-btn ${this.likedComments.includes(this.comment.id) ? 'liked' : ''}`, loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleLike() }, h("span", null, this.helpfulLabel, " ", this.likesCount > 0 ? `(${this.likesCount})` : ''), h("span", { innerHTML: ThumbsUp })) : '', this.comment.is_pending ?
             h("span", { class: "s-comments-item-pending-text" }, this.waiting_approval_trans) : null))), !!this.getReplies().length && !isAdmin ?
             this.getReplies().map((reply) => {
                 return h("div", null, h("salla-comment-item", { comment: reply }));
@@ -234,6 +243,7 @@ export class SallaCommentItem {
             "has_order_trans": {},
             "allowLikes": {},
             "allowAttachImages": {},
+            "allowAttachVideos": {},
             "helpfulLabel": {},
             "reviewDetailsLabel": {},
             "likesCount": {},

package/dist/collection/components/salla-comments/salla-comments.css

@@ -2,6 +2,10 @@
   display: block;
 }
 
+salla-comment-item .s-comments-flex-1 {
+  min-width: 0;
+}
+
 .s-comments-item-review-factors-toggle {
   display: inline-flex;
   align-items: center;
@@ -120,6 +124,9 @@
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-6 {
+  margin-top: 1.5rem;
+}
 .flex {
   display: flex;
 }

package/dist/collection/components/salla-datetime-picker/salla-datetime-picker.js

@@ -879,7 +879,7 @@ export class SallaDatetimePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "LocaleKey",
-                    "resolved": "\"at\" | \"hr\" | \"th\" | \"tr\" | \"id\" | \"is\" | \"default\" | \"no\" | \"cy\" | \"es\" | \"ar\" | \"az\" | \"be\" | \"bg\" | \"bn\" | \"bs\" | \"ca\" | \"cat\" | \"ckb\" | \"cs\" | \"da\" | \"de\" | \"en\" | \"eo\" | \"et\" | \"fa\" | \"fi\" | \"fo\" | \"fr\" | \"gr\" | \"he\" | \"hi\" | \"hu\" | \"hy\" | \"it\" | \"ja\" | \"ka\" | \"ko\" | \"km\" | \"kz\" | \"lt\" | \"lv\" | \"mk\" | \"mn\" | \"ms\" | \"my\" | \"nl\" | \"nn\" | \"pa\" | \"pl\" | \"pt\" | \"ro\" | \"ru\" | \"si\" | \"sk\" | \"sl\" | \"sq\" | \"sr\" | \"sv\" | \"uk\" | \"vn\" | \"zh\" | \"uz\" | \"uz_latn\" | \"zh_tw\"",
+                    "resolved": "\"at\" | \"hr\" | \"th\" | \"tr\" | \"id\" | \"is\" | \"default\" | \"no\" | \"cy\" | \"es\" | \"mn\" | \"ms\" | \"ar\" | \"az\" | \"be\" | \"bg\" | \"bn\" | \"bs\" | \"ca\" | \"cat\" | \"ckb\" | \"cs\" | \"da\" | \"de\" | \"en\" | \"eo\" | \"et\" | \"fa\" | \"fi\" | \"fo\" | \"fr\" | \"gr\" | \"he\" | \"hi\" | \"hu\" | \"hy\" | \"it\" | \"ja\" | \"ka\" | \"ko\" | \"km\" | \"kz\" | \"lt\" | \"lv\" | \"mk\" | \"my\" | \"nl\" | \"nn\" | \"pa\" | \"pl\" | \"pt\" | \"ro\" | \"ru\" | \"si\" | \"sk\" | \"sl\" | \"sq\" | \"sr\" | \"sv\" | \"uk\" | \"vn\" | \"zh\" | \"uz\" | \"uz_latn\" | \"zh_tw\"",
                     "references": {
                         "LocaleKey": {
                             "location": "import",

package/dist/collection/components/salla-file-upload/salla-file-upload.css

@@ -223,6 +223,138 @@
   display: -webkit-box;
   -webkit-box-orient: vertical;
 }
+.s-file-upload-has-gallery.s-file-upload-multiple .filepond--list-scroller {
+  display: none !important;
+}
+.s-file-upload-has-gallery.s-file-upload-multiple .filepond--drop-label:not(.s-hidden) {
+  cursor: pointer;
+}
+.s-file-upload-has-gallery.s-file-upload-multiple.s-file-upload-at-max .filepond--root {
+  min-height: 120px;
+}
+.s-file-upload-has-gallery.s-file-upload-multiple .filepond--drop-label.s-file-upload-drop-label-disabled {
+  visibility: visible !important;
+  opacity: 0.55 !important;
+  transform: none !important;
+  height: auto !important;
+  min-height: 4.75em !important;
+  pointer-events: none !important;
+  cursor: not-allowed;
+}
+.s-file-upload-has-gallery.s-file-upload-multiple .filepond--drop-label.s-file-upload-drop-label-disabled label {
+  opacity: 1 !important;
+}
+.s-file-upload-wrapper .filepond--root[data-disabled] .filepond--drop-label label {
+  opacity: 0.55;
+}
+.s-file-upload-gallery {
+  --s-file-upload-preview-size: 75px;
+  --s-file-upload-remove-size: 18px;
+  --s-file-upload-remove-icon-size: 10px;
+  --s-file-upload-gallery-gap: 12px;
+  position: relative;
+  margin-top: 0.5rem;
+  padding-top: calc(var(--s-file-upload-remove-size) / 2);
+  padding-inline-end: calc(var(--s-file-upload-remove-size) / 2);
+  overflow: visible;
+}
+.s-file-upload-gallery-track {
+  display: flex;
+  gap: var(--s-file-upload-gallery-gap);
+  width: 100%;
+  min-height: var(--s-file-upload-preview-size);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  padding-bottom: 0.25rem;
+}
+.s-file-upload-gallery-item {
+  position: relative;
+  display: block;
+  width: var(--s-file-upload-preview-size);
+  height: var(--s-file-upload-preview-size);
+  flex-shrink: 0;
+  overflow: visible;
+}
+.s-file-upload-gallery-thumb {
+  width: var(--s-file-upload-preview-size);
+  height: var(--s-file-upload-preview-size);
+  aspect-ratio: 1/1;
+  border-radius: 0.375rem;
+  overflow: hidden;
+  background-color: #f3f4f6;
+  cursor: pointer;
+  position: relative;
+  border: 1px solid #e5e7eb;
+  box-sizing: border-box;
+}
+.s-file-upload-gallery-thumb.is-processing {
+  opacity: 0.7;
+}
+.s-file-upload-gallery-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+}
+.s-file-upload-gallery-thumb video.s-file-upload-gallery-video-thumb {
+  display: block;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+  pointer-events: none;
+}
+.s-file-upload-gallery-remove {
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0;
+  inset-inline-start: auto;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--s-file-upload-remove-size);
+  height: var(--s-file-upload-remove-size);
+  padding: 0;
+  line-height: 1;
+  border-radius: 9999px;
+  background-color: #fff;
+  border: 1px solid #9ca3af;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+}
+.s-file-upload-gallery-remove:hover {
+  background-color: #f9fafb;
+}
+.s-file-upload-gallery-remove svg {
+  display: block;
+  width: var(--s-file-upload-remove-icon-size);
+  height: var(--s-file-upload-remove-icon-size);
+  fill: #1f2937;
+  pointer-events: none;
+}
+.s-file-upload-gallery-video-icon {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+}
+.s-file-upload-gallery-video-icon svg {
+  width: calc(var(--s-file-upload-preview-size) * 0.28);
+  height: calc(var(--s-file-upload-preview-size) * 0.28);
+  max-width: 2rem;
+  max-height: 2rem;
+  fill: #fff;
+  opacity: 0.9;
+}
+.visible{
+  visibility: visible;
+}
 .fixed{
   position: fixed;
 }
@@ -238,12 +370,29 @@
 .resize{
   resize: both;
 }
+.ps-2{
+  padding-inline-start: 0.5rem;
+}
 .filter{
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 .s-hidden{
   display: none;
 }
+.s-scrollbar::-webkit-scrollbar{
+  width: 5px;
+}
+.s-scrollbar::-webkit-scrollbar-track{
+  background-color: #eee;
+}
+.s-scrollbar::-webkit-scrollbar-thumb{
+  background-color: var(--color-primary);
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+}
 .s-file-upload-wrapper .filepond--drop-label{
   height: 100%;
   cursor: pointer;