@trops/dash-core 0.1.198 → 0.1.200

package/dist/index.js

@@ -5665,12 +5665,11 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var handleSearchChange = React.useCallback(function (e) {
-    var q = e.target.value;
-    setSearchQuery(q);
+  var handleSearchChange = React.useCallback(function (val) {
+    setSearchQuery(val);
     dispatch({
       type: "SET_SEARCH_QUERY",
-      payload: q
+      payload: val
     });
   }, [setSearchQuery, dispatch]);
 
@@ -5736,76 +5735,61 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
   var hasResults = filteredDashboards.length > 0 || filteredWidgets.length > 0;
   var hasActiveFilters = filters.categories.length > 0 || filters.providers.length > 0;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "wizard-discover-step",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "wizard-discover-search",
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-discover-search-input",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-          icon: "magnifying-glass",
-          fixedWidth: true,
-          className: "wizard-discover-search-icon"
-        }), /*#__PURE__*/jsxRuntime.jsx("input", {
-          type: "text",
-          placeholder: "Search registry...",
-          value: searchQuery,
-          onChange: handleSearchChange,
-          className: "wizard-discover-input"
-        })]
-      })
+    className: "flex flex-col gap-4",
+    children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+      value: searchQuery,
+      onChange: handleSearchChange,
+      placeholder: "Search registry..."
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "wizard-discover-filters",
+      className: "flex flex-col gap-3",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-discover-filter-row",
+        className: "flex flex-col gap-1.5",
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "wizard-discover-filter-label",
+          className: "text-xs font-semibold text-gray-400 uppercase tracking-wide",
           children: "Categories"
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "wizard-discover-chips",
+          className: "flex flex-wrap gap-1.5",
           children: DASHBOARD_TAGS$1.map(function (tag) {
-            return /*#__PURE__*/jsxRuntime.jsx("button", {
-              type: "button",
-              className: "wizard-chip ".concat(filters.categories.includes(tag) ? "wizard-chip--active" : ""),
+            return /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag2, {
+              text: tag,
               onClick: function onClick() {
                 return handleToggleCategory(tag);
               },
-              children: tag
+              className: filters.categories.includes(tag) ? "ring-1 ring-blue-400" : ""
             }, tag);
           })
         })]
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-discover-filter-row",
+        className: "flex flex-col gap-1.5",
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "wizard-discover-filter-label",
+          className: "text-xs font-semibold text-gray-400 uppercase tracking-wide",
           children: "Providers"
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "wizard-discover-chips",
+          className: "flex flex-wrap gap-1.5",
           children: KNOWN_PROVIDERS.map(function (prov) {
-            return /*#__PURE__*/jsxRuntime.jsx("button", {
-              type: "button",
-              className: "wizard-chip ".concat(filters.providers.includes(prov.key) ? "wizard-chip--active" : ""),
+            return /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag2, {
+              text: prov.name,
               onClick: function onClick() {
                 return handleToggleProvider(prov.key);
               },
-              children: prov.name
+              className: filters.providers.includes(prov.key) ? "ring-1 ring-blue-400" : ""
             }, prov.key);
           })
         })]
       })]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "wizard-discover-results",
+      className: "flex flex-col gap-6 mt-2",
       children: isLoading ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-loading",
+        className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-400",
         children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
           icon: "spinner",
           spin: true,
-          fixedWidth: true,
-          className: "wizard-loading-icon"
+          fixedWidth: true
         }), /*#__PURE__*/jsxRuntime.jsx("span", {
           children: "Searching registry..."
         })]
       }) : error ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-error",
+        className: "flex items-center gap-2 text-red-400 py-4",
         children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
           icon: "circle-exclamation",
           fixedWidth: true
@@ -5813,55 +5797,54 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
           children: error
         })]
       }) : !hasResults ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-empty",
+        className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
         children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
           icon: "magnifying-glass",
-          fixedWidth: true,
-          className: "wizard-empty-icon"
+          fixedWidth: true
         }), /*#__PURE__*/jsxRuntime.jsx("p", {
           children: "No results match your search."
         }), hasActiveFilters && /*#__PURE__*/jsxRuntime.jsx("p", {
-          className: "wizard-empty-hint",
+          className: "text-xs text-gray-600",
           children: "Try removing some filters to see more results."
         })]
       }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [filteredDashboards.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "wizard-discover-section",
+          className: "flex flex-col gap-2",
           children: [/*#__PURE__*/jsxRuntime.jsxs("h4", {
-            className: "wizard-discover-section-title",
+            className: "text-sm font-semibold text-gray-300 flex items-center gap-2",
             children: ["Dashboards (", filteredDashboards.length, " result", filteredDashboards.length !== 1 ? "s" : "", ")"]
           }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "wizard-dashboard-list",
+            className: "flex flex-col gap-2",
             children: filteredDashboards.map(function (dash) {
               var isSelected = state.selectedDashboard && state.selectedDashboard.name === dash.name;
               var widgetCount = (dash.widgets || []).length;
               var providerNames = (dash.providers || []).map(function (p) {
                 return p.name || p.type;
               }).join(", ");
-              return /*#__PURE__*/jsxRuntime.jsxs("button", {
-                type: "button",
-                className: "wizard-dashboard-card ".concat(isSelected ? "wizard-dashboard-card--selected" : ""),
+              return /*#__PURE__*/jsxRuntime.jsxs(DashReact.Card2, {
+                hover: true,
+                selected: isSelected,
                 onClick: function onClick() {
                   return handleSelectDashboard(dash);
                 },
                 children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "wizard-dashboard-card-header",
+                  className: "flex items-center gap-2",
                   children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
                     icon: resolveIcon(dash.icon || "grid-2"),
                     fixedWidth: true,
-                    className: "wizard-dashboard-card-icon"
+                    className: "text-gray-400"
                   }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                    className: "wizard-dashboard-card-name",
+                    className: "text-sm font-medium text-gray-200",
                     children: dash.displayName || dash.name
                   }), isSelected && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
                     icon: "circle-check",
-                    className: "wizard-dashboard-card-check"
+                    className: "ml-auto text-blue-400"
                   })]
                 }), dash.description && /*#__PURE__*/jsxRuntime.jsx("p", {
-                  className: "wizard-dashboard-card-desc",
+                  className: "text-xs text-gray-400 mt-1",
                   children: dash.description
                 }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "wizard-dashboard-card-meta",
+                  className: "flex items-center gap-3 mt-2 text-xs text-gray-500",
                   children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
                     children: [widgetCount, " widget", widgetCount !== 1 ? "s" : ""]
                   }), providerNames && /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -5872,49 +5855,49 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
             })
           })]
         }), filteredWidgets.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "wizard-discover-section",
+          className: "flex flex-col gap-2",
           children: [/*#__PURE__*/jsxRuntime.jsxs("h4", {
-            className: "wizard-discover-section-title",
-            children: ["Widgets (", filteredWidgets.length, " result", filteredWidgets.length !== 1 ? "s" : "", ")", state.selectedWidgets.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("span", {
-              className: "wizard-count-badge",
-              children: [state.selectedWidgets.length, " selected"]
+            className: "text-sm font-semibold text-gray-300 flex items-center gap-2",
+            children: ["Widgets (", filteredWidgets.length, " result", filteredWidgets.length !== 1 ? "s" : "", ")", state.selectedWidgets.length > 0 && /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag3, {
+              text: "".concat(state.selectedWidgets.length, " selected")
             })]
           }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "wizard-widget-list",
+            className: "grid grid-cols-2 gap-2",
             children: filteredWidgets.map(function (widget) {
               var checked = isWidgetSelected(widget);
-              return /*#__PURE__*/jsxRuntime.jsxs("button", {
-                type: "button",
-                className: "wizard-widget-card ".concat(checked ? "wizard-widget-card--selected" : ""),
+              return /*#__PURE__*/jsxRuntime.jsx(DashReact.Card2, {
+                hover: true,
+                selected: checked,
                 onClick: function onClick() {
                   return handleToggleWidget(widget);
                 },
-                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "wizard-widget-card-checkbox",
-                  children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex items-start gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
                     icon: checked ? "square-check" : "square",
-                    fixedWidth: true
-                  })
-                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "wizard-widget-card-info",
-                  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: "wizard-widget-card-header",
-                    children: [widget.icon && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                      icon: resolveIcon(widget.icon),
-                      fixedWidth: true,
-                      className: "wizard-widget-card-icon"
-                    }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                      className: "wizard-widget-card-name",
-                      children: widget.name
+                    fixedWidth: true,
+                    className: checked ? "text-blue-400 mt-0.5" : "text-gray-500 mt-0.5"
+                  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                    className: "flex flex-col gap-0.5 min-w-0",
+                    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: "flex items-center gap-1.5",
+                      children: [widget.icon && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                        icon: resolveIcon(widget.icon),
+                        fixedWidth: true,
+                        className: "text-gray-400 text-xs"
+                      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                        className: "text-sm font-medium text-gray-200 truncate",
+                        children: widget.name
+                      })]
+                    }), widget.description && /*#__PURE__*/jsxRuntime.jsx("p", {
+                      className: "text-xs text-gray-400 line-clamp-2",
+                      children: widget.description
+                    }), widget.packageDisplayName && /*#__PURE__*/jsxRuntime.jsx("span", {
+                      className: "text-xs text-gray-500",
+                      children: widget.packageDisplayName
                     })]
-                  }), widget.description && /*#__PURE__*/jsxRuntime.jsx("p", {
-                    className: "wizard-widget-card-desc",
-                    children: widget.description
-                  }), widget.packageDisplayName && /*#__PURE__*/jsxRuntime.jsx("span", {
-                    className: "wizard-widget-card-package",
-                    children: widget.packageDisplayName
                   })]
-                })]
+                })
               }, widget.key);
             })
           })]
@@ -6166,12 +6149,12 @@ var WizardLayoutPreviewStep = function WizardLayoutPreviewStep(_ref) {
     return t.id === state.layout.templateKey;
   });
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "wizard-layout-step",
+    className: "flex flex-col gap-4",
     children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
-      className: "wizard-step-header",
+      className: "text-lg font-semibold text-gray-200",
       children: "Preview your layout"
     }), /*#__PURE__*/jsxRuntime.jsx("p", {
-      className: "wizard-step-description",
+      className: "text-sm text-gray-400",
       children: "Drag widgets to rearrange their placement in the grid."
     }), template ? /*#__PURE__*/jsxRuntime.jsx(LayoutGrid, {
       template: template,
@@ -6179,11 +6162,10 @@ var WizardLayoutPreviewStep = function WizardLayoutPreviewStep(_ref) {
       widgets: state.selectedWidgets,
       dispatch: dispatch
     }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "wizard-empty",
+      className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
       children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
         icon: "grid-2",
-        fixedWidth: true,
-        className: "wizard-empty-icon"
+        fixedWidth: true
       }), /*#__PURE__*/jsxRuntime.jsx("p", {
         children: "No layout template available."
       })]
@@ -6197,16 +6179,15 @@ var PrebuiltPreview = function PrebuiltPreview(_ref2) {
   var dashboard = _ref2.dashboard;
   if (!dashboard) {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "wizard-layout-step",
+      className: "flex flex-col gap-4",
       children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
-        className: "wizard-step-header",
+        className: "text-lg font-semibold text-gray-200",
         children: "Dashboard preview"
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-empty",
+        className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
         children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
           icon: "box-open",
-          fixedWidth: true,
-          className: "wizard-empty-icon"
+          fixedWidth: true
         }), /*#__PURE__*/jsxRuntime.jsx("p", {
           children: "No dashboard selected."
         })]
@@ -6215,38 +6196,39 @@ var PrebuiltPreview = function PrebuiltPreview(_ref2) {
   }
   var widgets = dashboard.widgets || [];
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "wizard-layout-step",
+    className: "flex flex-col gap-4",
     children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
-      className: "wizard-step-header",
+      className: "text-lg font-semibold text-gray-200",
       children: "Dashboard preview"
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "wizard-prebuilt-preview",
+      className: "rounded-lg border border-gray-700/50 bg-gray-800/50 p-4 flex flex-col gap-3",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-prebuilt-header",
+        className: "flex items-center gap-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
           icon: resolveIcon(dashboard.icon || "grid-2"),
           fixedWidth: true,
-          className: "wizard-prebuilt-icon"
+          className: "text-blue-400"
         }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "wizard-prebuilt-name",
+          className: "text-base font-semibold text-gray-200",
           children: dashboard.displayName || dashboard.name
         })]
       }), dashboard.description && /*#__PURE__*/jsxRuntime.jsx("p", {
-        className: "wizard-prebuilt-desc",
+        className: "text-sm text-gray-400",
         children: dashboard.description
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-prebuilt-widgets",
+        className: "flex flex-col gap-1.5",
         children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-          className: "wizard-prebuilt-widgets-label",
+          className: "text-xs font-semibold text-gray-400 uppercase tracking-wide",
           children: ["Includes ", widgets.length, " widget", widgets.length !== 1 ? "s" : "", ":"]
         }), /*#__PURE__*/jsxRuntime.jsx("ul", {
-          className: "wizard-prebuilt-widget-list",
+          className: "flex flex-col gap-1",
           children: widgets.map(function (w, i) {
             return /*#__PURE__*/jsxRuntime.jsxs("li", {
+              className: "flex items-center gap-2 text-sm text-gray-300",
               children: [w.icon && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
                 icon: resolveIcon(w.icon),
                 fixedWidth: true,
-                className: "wizard-prebuilt-widget-icon"
+                className: "text-gray-500 text-xs"
               }), /*#__PURE__*/jsxRuntime.jsx("span", {
                 children: w.displayName || w.name
               })]
@@ -6334,7 +6316,7 @@ var LayoutGrid = function LayoutGrid(_ref3) {
     dragRef.current = null;
   }, []);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "wizard-layout-grid",
+    className: "gap-3 p-4",
     style: {
       display: "grid",
       gridTemplateRows: "repeat(".concat(template.rows, ", 1fr)"),
@@ -6348,9 +6330,9 @@ var LayoutGrid = function LayoutGrid(_ref3) {
       var cellStyle = {};
       if (cell.rowSpan) cellStyle.gridRow = "span ".concat(cell.rowSpan);
       if (cell.colSpan) cellStyle.gridColumn = "span ".concat(cell.colSpan);
-      var classNames = ["wizard-layout-cell", hasWidget ? "wizard-layout-cell--filled" : "wizard-layout-cell--empty", isDragging ? "wizard-layout-cell--dragging" : "", isDragOver ? "wizard-layout-cell--drag-over" : ""].filter(Boolean).join(" ");
+      var cellClasses = ["rounded-lg border transition-all flex items-center justify-center min-h-[60px]", hasWidget ? "border-gray-600 bg-gray-800/80 cursor-grab" : "border-dashed border-gray-700 bg-gray-800/30", isDragging ? "opacity-50 scale-95" : "", isDragOver ? "ring-2 ring-blue-400 border-blue-400" : ""].filter(Boolean).join(" ");
       return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames,
+        className: cellClasses,
         style: cellStyle,
         draggable: hasWidget,
         onDragStart: hasWidget ? function (e) {
@@ -6365,20 +6347,20 @@ var LayoutGrid = function LayoutGrid(_ref3) {
         },
         onDragEnd: handleDragEnd,
         children: hasWidget ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "wizard-layout-cell-content",
+          className: "flex items-center gap-2 px-3 py-2 text-sm text-gray-300",
           children: [content.icon && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: resolveIcon(content.icon),
             fixedWidth: true,
-            className: "wizard-layout-cell-icon"
+            className: "text-gray-400 text-xs"
           }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "wizard-layout-cell-name",
+            className: "truncate",
             children: content.displayName || content.name || content.key
           }), /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: "grip-vertical",
-            className: "wizard-layout-cell-grip"
+            className: "text-gray-600 ml-auto"
           })]
         }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "wizard-layout-cell-placeholder",
+          className: "text-gray-600",
           children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: "plus",
             fixedWidth: true
@@ -6680,17 +6662,17 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
   // --- Success state ---
   if (createdDashboard) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "wizard-customize-step",
+      className: "flex flex-col gap-4",
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-success",
+        className: "flex flex-col items-center justify-center gap-4 py-12",
         children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
           icon: "circle-check",
-          className: "wizard-success-icon"
+          className: "text-green-400 text-3xl"
         }), /*#__PURE__*/jsxRuntime.jsx("h3", {
-          className: "wizard-step-header",
+          className: "text-lg font-semibold text-gray-200",
           children: "Dashboard created!"
         }), /*#__PURE__*/jsxRuntime.jsxs("p", {
-          className: "wizard-step-description",
+          className: "text-sm text-gray-400",
           children: ["Your dashboard", " ", /*#__PURE__*/jsxRuntime.jsx("strong", {
             children: createdDashboard.name || state.customization.name.trim()
           }), " ", "is ready."]
@@ -6732,23 +6714,22 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
   });
   var selectedTheme = themes && state.customization.theme ? themes[state.customization.theme] : null;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "wizard-customize-step",
+    className: "flex flex-col gap-4",
     children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
-      className: "wizard-step-header",
+      className: "text-lg font-semibold text-gray-200",
       children: "Customize your dashboard"
     }), /*#__PURE__*/jsxRuntime.jsx("p", {
-      className: "wizard-step-description",
+      className: "text-sm text-gray-400",
       children: "Name your dashboard, choose a folder, and pick a theme."
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "wizard-customize-sections",
+      className: "flex flex-col gap-6",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-customize-section",
+        className: "flex flex-col gap-2",
         children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
-          className: "wizard-customize-label",
+          className: "flex items-center gap-2 text-sm font-semibold text-gray-300",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: "input-text",
-            fixedWidth: true,
-            className: "wizard-customize-label-icon"
+            fixedWidth: true
           }), "Dashboard Name"]
         }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
           value: state.customization.name,
@@ -6757,19 +6738,18 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
           autoFocus: true
         })]
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-customize-section",
+        className: "flex flex-col gap-2",
         children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
-          className: "wizard-customize-label",
+          className: "flex items-center gap-2 text-sm font-semibold text-gray-300",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: "folder",
-            fixedWidth: true,
-            className: "wizard-customize-label-icon"
+            fixedWidth: true
           }), "Folder"]
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "wizard-customize-folder-list",
+          className: "flex flex-col gap-1.5",
           children: [!isCreatingFolder ? /*#__PURE__*/jsxRuntime.jsxs("button", {
             type: "button",
-            className: "wizard-customize-folder-create",
+            className: "flex items-center gap-2 px-3 py-2 rounded border border-dashed border-gray-600 text-sm text-gray-400 hover:border-gray-500 hover:text-gray-300 transition-colors",
             onClick: function onClick() {
               return setIsCreatingFolder(true);
             },
@@ -6780,9 +6760,9 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
               children: "New Folder"
             })]
           }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "wizard-customize-folder-form",
+            className: "rounded-lg border border-gray-700 bg-gray-800/50 p-3 flex flex-col gap-2",
             children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "wizard-customize-folder-form-header",
+              className: "flex items-center justify-between",
               children: [/*#__PURE__*/jsxRuntime.jsx("span", {
                 className: "text-sm font-medium text-gray-300",
                 children: "New Folder"
@@ -6827,36 +6807,39 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
             })]
           }), localMenuItems.map(function (item) {
             var isSelected = !isCreatingFolder && item.id === state.customization.menuId;
-            return /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "wizard-customize-folder-item ".concat(isSelected ? "wizard-customize-folder-item--selected" : ""),
+            return /*#__PURE__*/jsxRuntime.jsx(DashReact.Card3, {
+              hover: true,
+              selected: isSelected,
               onClick: function onClick() {
                 return handleMenuSelect(item.id);
               },
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: item.icon || item.folder || "folder",
-                fixedWidth: true,
-                className: "w-5 h-5 ".concat(isSelected ? "text-blue-400" : "text-gray-400")
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-sm font-medium ".concat(isSelected ? "text-blue-300" : "text-gray-300"),
-                children: item.name
-              }), isSelected && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: "check",
-                className: "ml-auto text-blue-400 text-sm"
-              })]
+              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                  icon: item.icon || item.folder || "folder",
+                  fixedWidth: true,
+                  className: "w-5 h-5 ".concat(isSelected ? "text-blue-400" : "text-gray-400")
+                }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "text-sm font-medium ".concat(isSelected ? "text-blue-300" : "text-gray-300"),
+                  children: item.name
+                }), isSelected && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                  icon: "check",
+                  className: "ml-auto text-blue-400 text-sm"
+                })]
+              })
             }, item.id);
           })]
         })]
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-customize-section",
+        className: "flex flex-col gap-2",
         children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
-          className: "wizard-customize-label",
+          className: "flex items-center gap-2 text-sm font-semibold text-gray-300",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: "palette",
-            fixedWidth: true,
-            className: "wizard-customize-label-icon"
+            fixedWidth: true
           }), "Theme"]
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "wizard-customize-theme-list",
+          className: "flex flex-col gap-1.5",
           children: themes && Object.entries(themes).sort(function (_ref7, _ref8) {
             var _ref9 = _slicedToArray(_ref7, 2),
               a = _ref9[1];
@@ -6868,90 +6851,83 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
               key = _ref10[0],
               t = _ref10[1];
             var isThemeSelected = state.customization.theme === key;
-            return /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "wizard-customize-theme-item ".concat(isThemeSelected ? "wizard-customize-theme-item--selected" : ""),
+            return /*#__PURE__*/jsxRuntime.jsx(DashReact.Card3, {
+              hover: true,
+              selected: isThemeSelected,
               onClick: function onClick() {
                 return handleThemeSelect(key);
               },
-              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: "palette",
-                className: "w-5 h-5 mr-3 ".concat(isThemeSelected ? "text-blue-400" : "text-gray-400")
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "text-sm font-medium ".concat(isThemeSelected ? "text-blue-300" : "text-gray-300"),
-                children: t.name || key
-              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex flex-row space-x-1 ml-auto",
-                children: [t.primary && /*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "w-4 h-4 rounded bg-".concat(t.primary, "-500")
-                }), t.secondary && /*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "w-4 h-4 rounded bg-".concat(t.secondary, "-500")
-                }), t.tertiary && /*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "w-4 h-4 rounded bg-".concat(t.tertiary, "-500")
+              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                  icon: "palette",
+                  className: "w-5 h-5 ".concat(isThemeSelected ? "text-blue-400" : "text-gray-400")
+                }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "text-sm font-medium ".concat(isThemeSelected ? "text-blue-300" : "text-gray-300"),
+                  children: t.name || key
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex flex-row space-x-1 ml-auto",
+                  children: [t.primary && /*#__PURE__*/jsxRuntime.jsx("div", {
+                    className: "w-4 h-4 rounded bg-".concat(t.primary, "-500")
+                  }), t.secondary && /*#__PURE__*/jsxRuntime.jsx("div", {
+                    className: "w-4 h-4 rounded bg-".concat(t.secondary, "-500")
+                  }), t.tertiary && /*#__PURE__*/jsxRuntime.jsx("div", {
+                    className: "w-4 h-4 rounded bg-".concat(t.tertiary, "-500")
+                  })]
                 })]
-              })]
+              })
             }, key);
           })
         })]
       }), selectedProviders.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-customize-section",
+        className: "flex flex-col gap-2",
         children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
-          className: "wizard-customize-label",
+          className: "flex items-center gap-2 text-sm font-semibold text-gray-300",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: "plug",
-            fixedWidth: true,
-            className: "wizard-customize-label-icon"
+            fixedWidth: true
           }), "Provider Status"]
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "wizard-customize-provider-summary",
+          className: "rounded-lg border border-gray-700/50 bg-gray-800/50 p-4 flex flex-col gap-3",
           children: [configuredProviders.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "wizard-provider-group",
+            className: "flex flex-col gap-1.5",
             children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-              className: "wizard-provider-group-label wizard-provider-group-label--ready",
+              className: "flex items-center gap-1.5 text-xs font-semibold text-green-400",
               children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: "circle-check",
-                className: "text-green-400"
-              }), " ", "Ready (", configuredProviders.length, ")"]
+                icon: "circle-check"
+              }), " Ready (", configuredProviders.length, ")"]
             }), /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "wizard-provider-list",
+              className: "flex flex-wrap gap-1.5",
               children: configuredProviders.map(function (p) {
-                return /*#__PURE__*/jsxRuntime.jsxs("span", {
-                  className: "wizard-provider-badge wizard-provider-badge--ready",
-                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                    icon: resolveIcon(p.icon),
-                    fixedWidth: true
-                  }), p.name]
+                return /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag3, {
+                  text: p.name
                 }, p.key);
               })
             })]
           }), needsSetupProviders.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "wizard-provider-group",
+            className: "flex flex-col gap-1.5",
             children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-              className: "wizard-provider-group-label wizard-provider-group-label--setup",
+              className: "flex items-center gap-1.5 text-xs font-semibold text-amber-400",
               children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                icon: "circle-exclamation",
-                className: "text-amber-400"
-              }), " ", "Needs setup (", needsSetupProviders.length, ")"]
+                icon: "circle-exclamation"
+              }), " Needs setup (", needsSetupProviders.length, ")"]
             }), /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "wizard-provider-list",
+              className: "flex flex-wrap gap-1.5",
               children: needsSetupProviders.map(function (p) {
-                return /*#__PURE__*/jsxRuntime.jsxs("span", {
-                  className: "wizard-provider-badge wizard-provider-badge--setup",
-                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                    icon: resolveIcon(p.icon),
-                    fixedWidth: true
-                  }), p.name]
+                return /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag3, {
+                  text: p.name
                 }, p.key);
               })
             })]
           })]
         })]
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-customize-summary",
+        className: "rounded-lg border border-gray-700/50 bg-gray-800/50 p-4 flex flex-col gap-2",
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "wizard-customize-summary-title",
+          className: "text-sm font-semibold text-gray-300",
           children: "Summary"
         }), state.customization.name.trim() && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "wizard-customize-summary-row",
+          className: "flex items-center gap-2 text-sm text-gray-300",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: "clone",
             className: "text-blue-400"
@@ -6959,7 +6935,7 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
             children: state.customization.name.trim()
           })]
         }), selectedFolder && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "wizard-customize-summary-row",
+          className: "flex items-center gap-2 text-sm text-gray-300",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: selectedFolder.icon || selectedFolder.folder || "folder",
             className: "text-blue-400"
@@ -6967,7 +6943,7 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
             children: selectedFolder.name
           })]
         }), selectedTheme && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "wizard-customize-summary-row",
+          className: "flex items-center gap-2 text-sm text-gray-300",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: "palette",
             className: "text-blue-400"
@@ -6982,7 +6958,7 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
             })]
           })]
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "wizard-customize-summary-row",
+          className: "flex items-center gap-2 text-sm text-gray-300",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
             icon: isPrebuilt ? "box" : "grid-2",
             className: "text-blue-400"
@@ -6991,10 +6967,9 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
           })]
         })]
       }), error && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wizard-customize-error",
+        className: "flex items-center gap-2 text-red-400 py-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-          icon: "triangle-exclamation",
-          className: "text-red-400"
+          icon: "triangle-exclamation"
         }), /*#__PURE__*/jsxRuntime.jsx("span", {
           children: error
         })]