@mohasinac/appkit 3.5.1 → 3.5.3

package/dist/ui/components/BulkActionBar.style.css

@@ -160,7 +160,7 @@
 
 /* dark */
 .dark .appkit-bulk-bar {
-  border-color: rgba(233, 30, 140, 0.3);
+  border-color: color-mix(in srgb, var(--appkit-color-primary) 30%, transparent);
 }
 
 .dark .appkit-bulk-bar__stripe {
@@ -168,13 +168,13 @@
 }
 
 .dark .appkit-bulk-bar__count-pill {
-  border-color: rgba(233, 30, 140, 0.35);
-  background: rgba(233, 30, 140, 0.1);
+  border-color: color-mix(in srgb, var(--appkit-color-primary) 35%, transparent);
+  background: color-mix(in srgb, var(--appkit-color-primary) 10%, transparent);
   color: var(--appkit-color-primary-300);
 }
 
 .dark .appkit-bulk-bar__count-pill:hover {
-  background: rgba(233, 30, 140, 0.18);
+  background: color-mix(in srgb, var(--appkit-color-primary) 18%, transparent);
 }
 
 .dark .appkit-bulk-bar__picker-trigger {

package/dist/ui/components/Button.style.css

@@ -115,60 +115,61 @@
 }
 
 .appkit-button.appkit-button--secondary {
-  background: var(--appkit-color-surface);
+  background: var(--appkit-color-primary-50);
   border-color: var(--appkit-color-primary-700);
   color: var(--appkit-color-primary-700);
 }
 
 .appkit-button.appkit-button--secondary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--appkit-color-primary-700) 8%, transparent);
+  background: var(--appkit-color-primary-100);
 }
 
 .dark .appkit-button.appkit-button--secondary {
-  background: transparent;
+  background: color-mix(in srgb, var(--appkit-color-secondary) 16%, transparent);
   border-color: var(--appkit-color-secondary);
   color: var(--appkit-color-secondary);
 }
 
 .dark .appkit-button.appkit-button--secondary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--appkit-color-secondary) 12%, transparent);
+  background: color-mix(in srgb, var(--appkit-color-secondary) 26%, transparent);
 }
 
 .appkit-button--outline {
-  background: var(--appkit-color-surface);
-  border-color: var(--appkit-color-border);
+  background: color-mix(in srgb, var(--appkit-color-primary-700) 6%, var(--appkit-color-surface));
+  border-color: var(--appkit-color-primary-300);
   color: var(--appkit-color-text);
 }
 
 .appkit-button--outline:hover:not(:disabled) {
-  background: var(--appkit-color-bg);
+  background: color-mix(in srgb, var(--appkit-color-primary-700) 12%, var(--appkit-color-surface));
 }
 
 .dark .appkit-button--outline {
-  background: transparent;
-  border-color: var(--appkit-color-border);
+  background: color-mix(in srgb, var(--appkit-color-secondary) 10%, transparent);
+  border-color: color-mix(in srgb, var(--appkit-color-secondary) 40%, transparent);
   color: var(--appkit-color-text);
 }
 
 .dark .appkit-button--outline:hover:not(:disabled) {
-  background: rgba(30, 41, 59, 0.5);
+  background: color-mix(in srgb, var(--appkit-color-secondary) 18%, transparent);
 }
 
 .appkit-button--ghost {
-  background: transparent;
+  background: var(--appkit-color-border-subtle);
   color: var(--appkit-color-text);
 }
 
 .appkit-button--ghost:hover:not(:disabled) {
-  background: var(--appkit-color-border-subtle);
+  background: var(--appkit-color-border);
 }
 
 .dark .appkit-button--ghost {
+  background: rgba(255, 255, 255, 0.06);
   color: var(--appkit-color-text-muted);
 }
 
 .dark .appkit-button--ghost:hover:not(:disabled) {
-  background: rgba(30, 41, 59, 0.5);
+  background: rgba(255, 255, 255, 0.12);
 }
 
 .appkit-button.appkit-button--danger {

package/dist/ui/components/HorizontalScroller.js

@@ -40,9 +40,20 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
     const itemCount = normalizedItems.length;
     // Number of clone slots on each side — fixed size, computed once from perView hint.
     // Using Math.min so tiny lists don't double-render more slots than they have items.
-    const loopCloneCount = loop && itemsMode && itemCount > 0
+    const loopCloneCount = loop && itemsMode && rows <= 1 && itemCount > 0
         ? Math.min(itemCount, typeof perView === "number" ? perView : 3)
         : 0;
+    // Grid mode (rows > 1): items are grouped into full-width "slides". Looping here
+    // clones exactly one slide on each side (the slide itself is the full stride, so a
+    // single buffer slide is enough) and teleports across a full cycle at the boundary —
+    // same technique as the single-item loop above, just at slide granularity.
+    const gridMode = itemsMode && rows > 1;
+    const gridCols = colCount > 0 ? colCount : 3;
+    const gridCardsPerSlide = rows * gridCols;
+    const gridSlideCount = gridMode
+        ? Math.ceil(itemCount / gridCardsPerSlide)
+        : 0;
+    const gridLoopActive = loop && gridMode && gridSlideCount > 1;
     // On first paint after itemWidth resolves, scroll to the first *real* item
     // (skipping the left clone slots that provide backward-wrap buffer).
     useEffect(() => {
@@ -92,6 +103,53 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
             });
         }
     }, [loop, loopCloneCount, itemWidth, gap, itemCount, containerRef]);
+    // Prevents re-running the initial scroll-to-real-start on every resize in grid loop mode
+    const gridLoopInitialized = useRef(false);
+    // On first paint, scroll past the prepended clone slide to the first *real* slide.
+    useEffect(() => {
+        if (!gridLoopActive)
+            return;
+        const el = containerRef.current;
+        if (!el || gridLoopInitialized.current)
+            return;
+        gridLoopInitialized.current = true;
+        const stride = el.clientWidth + gap;
+        el.style.scrollBehavior = "auto";
+        el.scrollLeft = stride;
+        requestAnimationFrame(() => {
+            el.style.scrollBehavior = "";
+        });
+    }, [gridLoopActive, gap, containerRef]);
+    // Circular teleporter for grid mode — same idea as handleScrollLoop, at slide granularity.
+    const handleGridScrollLoop = useCallback(() => {
+        if (!gridLoopActive)
+            return;
+        const el = containerRef.current;
+        if (!el || isJumping.current)
+            return;
+        const stride = el.clientWidth + gap;
+        const cycleWidth = gridSlideCount * stride;
+        const realStart = stride; // after the 1 prepended clone slide
+        const realEnd = realStart + cycleWidth;
+        if (el.scrollLeft < realStart - stride * 0.5) {
+            isJumping.current = true;
+            el.style.scrollBehavior = "auto";
+            el.scrollLeft += cycleWidth;
+            requestAnimationFrame(() => {
+                isJumping.current = false;
+                el.style.scrollBehavior = "";
+            });
+        }
+        else if (el.scrollLeft > realEnd - el.clientWidth + stride * 0.5) {
+            isJumping.current = true;
+            el.style.scrollBehavior = "auto";
+            el.scrollLeft -= cycleWidth;
+            requestAnimationFrame(() => {
+                isJumping.current = false;
+                el.style.scrollBehavior = "";
+            });
+        }
+    }, [gridLoopActive, gap, gridSlideCount, containerRef]);
     const scrollBy = useCallback((direction) => {
         const el = containerRef.current;
         if (!el)
@@ -158,27 +216,35 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         updateExtents();
     }, [updateExtents, itemWidth, itemCount]);
     const content = itemsMode ? (rows > 1 ? (
-    // Grid mode: group items into slides of (rows × colCount) cards
+    // Grid mode: group items into slides of (rows × colCount) cards.
+    // Loop mode prepends a clone of the last slide and appends a clone of the
+    // first slide; handleGridScrollLoop teleports across a full cycle at the
+    // boundary so the strip appears to scroll infinitely.
     (() => {
-        const cols = colCount > 0 ? colCount : 3;
-        const cardsPerSlide = rows * cols;
-        const slideCount = Math.ceil(normalizedItems.length / cardsPerSlide);
-        return Array.from({ length: slideCount }, (_, slideIndex) => {
-            const slideItems = normalizedItems.slice(slideIndex * cardsPerSlide, (slideIndex + 1) * cardsPerSlide);
+        const renderSlide = (slideIndex, key, isClone) => {
+            const slideItems = normalizedItems.slice(slideIndex * gridCardsPerSlide, (slideIndex + 1) * gridCardsPerSlide);
             return (_jsx("div", { className: "appkit-hscroller__slide", style: {
                     display: "grid",
-                    gridTemplateColumns: `repeat(${cols}, 1fr)`,
+                    gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
                     gap: `${gap}px`,
                     width: "100%",
                     flexShrink: 0,
-                }, children: slideItems.map((item, idx) => (_jsx("div", { className: [
+                }, "aria-hidden": isClone ? true : undefined, children: slideItems.map((item, idx) => (_jsx("div", { className: [
                         "appkit-hscroller__item",
                         snapToItems ? "appkit-hscroller__item--snap" : "",
                         itemClassName,
                     ]
                         .filter(Boolean)
-                        .join(" "), style: minItemWidth ? { minWidth: minItemWidth } : undefined, children: renderItem(item, slideIndex * cardsPerSlide + idx) }, keyExtractor ? keyExtractor(item, slideIndex * cardsPerSlide + idx) : slideIndex * cardsPerSlide + idx))) }, `slide-${slideIndex}`));
-        });
+                        .join(" "), style: minItemWidth ? { minWidth: minItemWidth } : undefined, children: renderItem(item, slideIndex * gridCardsPerSlide + idx) }, keyExtractor ? keyExtractor(item, slideIndex * gridCardsPerSlide + idx) : slideIndex * gridCardsPerSlide + idx))) }, key));
+        };
+        const realSlides = Array.from({ length: gridSlideCount }, (_, slideIndex) => renderSlide(slideIndex, `slide-${slideIndex}`, false));
+        if (!gridLoopActive)
+            return realSlides;
+        return [
+            renderSlide(gridSlideCount - 1, "slide-clone-start", true),
+            ...realSlides,
+            renderSlide(0, "slide-clone-end", true),
+        ];
     })()) : loop && itemCount > 0 ? (
     // Circular loop: fixed (itemCount + 2×loopCloneCount) DOM slots.
     // Each slot maps to a real item via modulo — no array cloning, no list growth.
@@ -220,16 +286,25 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         }
         : {};
     const combinedOnScroll = () => {
-        if (loop)
-            handleScrollLoop();
-        if (!loop)
-            updateExtents();
+        if (gridMode) {
+            if (gridLoopActive)
+                handleGridScrollLoop();
+            else
+                updateExtents();
+        }
+        else {
+            if (loop)
+                handleScrollLoop();
+            if (!loop)
+                updateExtents();
+        }
         onScroll?.();
     };
     if (showArrows) {
-        const prevDisabled = !loop && atStart;
-        const nextDisabled = !loop && atEnd;
-        const arrowsHidden = !loop && atStart && atEnd; // no scrollable overflow
+        const effectiveLoop = gridMode ? gridLoopActive : loop;
+        const prevDisabled = !effectiveLoop && atStart;
+        const nextDisabled = !effectiveLoop && atEnd;
+        const arrowsHidden = !effectiveLoop && atStart && atEnd; // no scrollable overflow
         return (_jsxs("div", { className: ["appkit-hscroller appkit-hscroller--with-arrows", className]
                 .filter(Boolean)
                 .join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...hoverHandlers, "data-section": "horizontalscroller-div-511", children: [showFadeEdges && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--left" }), _jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--right" })] })), !arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(-1), "aria-label": "Previous", "aria-disabled": prevDisabled || undefined, disabled: prevDisabled, className: `appkit-hscroller__arrow appkit-hscroller__arrow--prev appkit-hscroller__arrow--${arrowSize}`, children: _jsx(ChevronLeft, { className: "w-4 h-4" }) })), _jsx("div", { ref: containerRef, onScroll: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px`, paddingLeft: 36, paddingRight: 36 }, "data-section": "horizontalscroller-div-512", children: content }), !arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(1), "aria-label": "Next", "aria-disabled": nextDisabled || undefined, disabled: nextDisabled, className: `appkit-hscroller__arrow appkit-hscroller__arrow--next appkit-hscroller__arrow--${arrowSize}`, children: _jsx(ChevronRight, { className: "w-4 h-4" }) }))] }));

package/dist/ui/components/ListingToolbar.js

@@ -20,7 +20,7 @@ const DEFAULT_LABELS = {
     clearSelection: "Clear",
 };
 const VIEW_BTN_BASE = "p-1.5 sm:p-2 transition-colors";
-const VIEW_BTN_ACTIVE = "bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white";
+const VIEW_BTN_ACTIVE = "bg-[var(--appkit-color-primary)] text-white";
 const VIEW_BTN_INACTIVE = "text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)]";
 export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue = "", searchPlaceholder = "Search…", onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view = "grid", onViewChange, hideViewToggle = false, showTableView = false, onResetAll, hasActiveState = false, bulkMode = false, bulkSelectedCount = 0, bulkTotalCount = 0, onBulkSelectAll, onBulkClear, toggles, extra, labels, className = "", }) {
     const l = { ...DEFAULT_LABELS, ...labels };
@@ -34,8 +34,8 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
     };
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
     return (_jsx("div", { "data-testid": "listing-toolbar", className: `sticky top-[var(--header-height,0px)] z-20 border-b border-[var(--appkit-color-border)] bg-white/95 bg-[var(--appkit-color-surface)]/95 backdrop-blur-sm py-2 px-3 sm:py-2.5 sm:px-4 ${className}`, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2.5", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-3 py-1.5 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [allSelected
-                                    ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary,theme(colors.violet.600))]" })
-                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary,theme(colors.violet.600))] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
-                                    ? "border-transparent bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white"
+                                    ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary)]" })
+                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary)] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary)] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
+                                    ? "border-transparent bg-[var(--appkit-color-primary)] text-white"
                                     : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]"}`, children: t.label }, t.label))) })), extra] })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "3.5.1",
+  "version": "3.5.3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"