@btst/stack 5.1.0 → 6.0.0-beta.0

package/dist/packages/ui/src/components/ui-builder/internal/editor-panel.mjs

@@ -1,338 +0,0 @@
-"use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCallback, useState, useRef, useMemo, useEffect } from 'react';
-import { Plus, ZoomIn, ZoomOut, Crosshair, MousePointer } from 'lucide-react';
-import { useLayerStore } from '../../../lib/ui-builder/store/layer-store.mjs';
-import { TransformWrapper, TransformComponent, useControls } from '../../../../../../node_modules/.pnpm/react-zoom-pan-pinch@3.7.0_react-dom@19.3.1_react@19.3.1__react@19.3.1/node_modules/react-zoom-pan-pinch/dist/index.esm.mjs';
-import LayerRenderer from '../layer-renderer.mjs';
-import { DndContextProvider } from '../../../lib/ui-builder/context/dnd-context.mjs';
-import { cn } from '../../../lib/utils.mjs';
-import { useEditorStore } from '../../../lib/ui-builder/store/editor-store.mjs';
-import { AddComponentsPopover } from './components/add-component-popover.mjs';
-import { Button } from '../../button.mjs';
-import { ResizableWrapper } from './canvas/resizable-wrapper.mjs';
-import AutoFrame from './canvas/auto-frame.mjs';
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../../tooltip.mjs';
-import { LayerContextMenuPortal } from './components/layer-context-menu-portal.mjs';
-import { useComponentDragContext } from '../../../lib/ui-builder/context/dnd-contexts.mjs';
-import { countLayers } from '../../../lib/ui-builder/store/layer-utils.mjs';
-
-const WRAPPER_STYLE = {
-  width: "100%",
-  height: "100%"
-};
-const CONTENT_STYLE = {
-  width: "100%",
-  height: "100%"
-};
-const TRANSFORM_DIV_STYLE = {
-  minHeight: "100vh",
-  padding: "50px"
-};
-const WHEEL_CONFIG = { step: 0.1 };
-const DOUBLE_CLICK_CONFIG = { disabled: false };
-const ZoomControls = ({
-  onPointerEventsToggle,
-  pointerEventsEnabled
-}) => {
-  const { zoomIn, zoomOut, resetTransform } = useControls();
-  const handleZoomIn = useCallback(() => zoomIn(), [zoomIn]);
-  const handleZoomOut = useCallback(() => zoomOut(), [zoomOut]);
-  const handleReset = useCallback(() => resetTransform(), [resetTransform]);
-  const handleTogglePointerEvents = useCallback(() => {
-    onPointerEventsToggle(!pointerEventsEnabled);
-  }, [onPointerEventsToggle, pointerEventsEnabled]);
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "absolute bottom-24 md:bottom-4 right-4 z-[1000] flex shadow-lg rounded-full", children: [
-    /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          "data-testid": "button-ZoomIn",
-          variant: "secondary",
-          className: "size-14 md:size-10 rounded-l-full rounded-r-none border-r border-border [&_svg]:size-7 [&_svg]:md:size-4",
-          onClick: handleZoomIn,
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Zoom in" }),
-            /* @__PURE__ */ jsx(ZoomIn, { className: "text-secondary-foreground" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx("p", { children: "Zoom in" }) })
-    ] }),
-    /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          "data-testid": "button-ZoomOut",
-          variant: "secondary",
-          className: "size-14 md:size-10 rounded-none border-r border-border [&_svg]:size-7 [&_svg]:md:size-4",
-          onClick: handleZoomOut,
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Zoom out" }),
-            /* @__PURE__ */ jsx(ZoomOut, { className: "text-secondary-foreground" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx("p", { children: "Zoom out" }) })
-    ] }),
-    /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          "data-testid": "button-Reset",
-          variant: "secondary",
-          className: "size-14 md:size-10 rounded-none border-r border-border [&_svg]:size-7 [&_svg]:md:size-4",
-          onClick: handleReset,
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Reset" }),
-            /* @__PURE__ */ jsx(Crosshair, { className: "text-secondary-foreground" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx("p", { children: "Reset zoom and position" }) })
-    ] }),
-    /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          "data-testid": "button-PointerEvents",
-          variant: pointerEventsEnabled ? "default" : "secondary",
-          className: "size-14 md:size-10 rounded-r-full rounded-l-none [&_svg]:size-7 [&_svg]:md:size-4",
-          onClick: handleTogglePointerEvents,
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: pointerEventsEnabled ? "Disable pointer events" : "Enable pointer events" }),
-            /* @__PURE__ */ jsx(MousePointer, { className: pointerEventsEnabled ? "text-primary-foreground" : "text-secondary-foreground" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx("p", { children: pointerEventsEnabled ? "Disable page interaction" : "Enable page interaction" }) })
-    ] })
-  ] }) });
-};
-const EditorPanel = ({ className }) => {
-  const {
-    selectLayer,
-    selectedLayerId,
-    findLayerById,
-    selectedPageId
-  } = useLayerStore();
-  const previewMode = useEditorStore((state) => state.previewMode);
-  const componentRegistry = useEditorStore((state) => state.registry);
-  const selectedLayer = findLayerById(selectedLayerId);
-  const selectedPage = findLayerById(selectedPageId);
-  const onSelectElement = useCallback(
-    (layerId) => {
-      selectLayer(layerId);
-    },
-    [selectLayer]
-  );
-  return /* @__PURE__ */ jsx(DndContextProvider, { children: /* @__PURE__ */ jsx(
-    EditorPanelContent,
-    {
-      className,
-      selectedLayerId,
-      selectedPageId,
-      selectedLayer,
-      selectedPage,
-      previewMode,
-      componentRegistry,
-      autoZoomToSelected: false,
-      onSelectElement
-    }
-  ) });
-};
-const EditorPanelContent = ({
-  className,
-  selectedPageId,
-  selectedLayerId,
-  selectedLayer,
-  selectedPage,
-  previewMode,
-  componentRegistry,
-  autoZoomToSelected,
-  onSelectElement
-}) => {
-  const { isDragging: isComponentDragging } = useComponentDragContext();
-  const [resizing, setResizing] = useState(false);
-  const [frameSize, setFrameSize] = useState({
-    width: 1e3,
-    height: 1e3
-  });
-  const [pointerEventsEnabled, setPointerEventsEnabled] = useState(true);
-  const frameRef = useRef(null);
-  const handleResizingChange = useCallback((isDragging) => {
-    setResizing(isDragging);
-  }, []);
-  const handleSizeChange = useCallback((width, height) => {
-    setFrameSize({ width, height });
-  }, []);
-  const handlePointerEventsToggle = useCallback((enabled) => {
-    setPointerEventsEnabled(enabled);
-  }, []);
-  const layers = selectedPage.children;
-  const totalLayers = useMemo(() => countLayers(layers), [layers]);
-  const editorConfig = useMemo(
-    () => ({
-      zIndex: 1,
-      totalLayers,
-      selectedLayer,
-      onSelectElement
-    }),
-    [
-      totalLayers,
-      selectedLayer,
-      onSelectElement
-    ]
-  );
-  const widthClass = useMemo(() => {
-    if (previewMode === "responsive") {
-      return "w-full";
-    } else if (previewMode === "mobile") {
-      return "w-[390px]";
-    } else if (previewMode === "tablet") {
-      return "w-[768px]";
-    } else if (previewMode === "desktop") {
-      return "w-[1440px]";
-    } else {
-      return "w-full";
-    }
-  }, [previewMode]);
-  const heightClass = useMemo(() => {
-    if (previewMode === "responsive") {
-      return "";
-    } else if (previewMode === "mobile") {
-      return "h-[844px]";
-    } else if (previewMode === "tablet") {
-      return "h-[1024px]";
-    } else if (previewMode === "desktop") {
-      return "h-[900px]";
-    } else {
-      return "h-full";
-    }
-  }, [previewMode]);
-  const resizableProps = useMemo(() => ({
-    isResizable: previewMode === "responsive",
-    onDraggingChange: handleResizingChange,
-    onSizeChange: handleSizeChange
-  }), [previewMode, handleResizingChange, handleSizeChange]);
-  const autoFrameProps = useMemo(() => ({
-    height: frameSize.height,
-    className: cn("shadow-lg", widthClass, heightClass),
-    pointerEventsEnabled
-  }), [frameSize.height, widthClass, heightClass, pointerEventsEnabled]);
-  const layerRendererProps = useMemo(() => ({
-    className: "contents",
-    page: selectedPage,
-    editorConfig,
-    componentRegistry
-  }), [selectedPage, editorConfig, componentRegistry]);
-  const renderer = useMemo(
-    () => /* @__PURE__ */ jsx(ResizableWrapper, { ...resizableProps, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: "editor-panel-content",
-        className: cn("overflow-visible ", widthClass),
-        children: /* @__PURE__ */ jsxs(AutoFrame, { ...autoFrameProps, ref: frameRef, children: [
-          /* @__PURE__ */ jsx(LayerRenderer, { ...layerRendererProps }),
-          /* @__PURE__ */ jsx(LayerContextMenuPortal, {})
-        ] })
-      }
-    ) }),
-    [resizableProps, widthClass, autoFrameProps, layerRendererProps]
-  );
-  const wrapperStyle = WRAPPER_STYLE;
-  const contentStyle = CONTENT_STYLE;
-  const transformDivStyle = TRANSFORM_DIV_STYLE;
-  const wheelConfig = WHEEL_CONFIG;
-  const doubleClickConfig = DOUBLE_CLICK_CONFIG;
-  const panningConfig = useMemo(() => ({
-    disabled: resizing || isComponentDragging
-  }), [resizing, isComponentDragging]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      id: "editor-panel-container",
-      className: cn(
-        "flex flex-col relative size-full bg-fixed bg-[radial-gradient(hsl(var(--border))_1px,hsl(var(--primary)/0.05)_1px)] [background-size:16px_16px] will-change-auto",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          TransformWrapper,
-          {
-            initialScale: 0.8,
-            initialPositionX: -30,
-            initialPositionY: -30,
-            minScale: 0.1,
-            maxScale: 5,
-            wheel: wheelConfig,
-            doubleClick: doubleClickConfig,
-            panning: panningConfig,
-            centerOnInit: false,
-            limitToBounds: false,
-            children: [
-              /* @__PURE__ */ jsx(
-                ZoomControls,
-                {
-                  onPointerEventsToggle: handlePointerEventsToggle,
-                  pointerEventsEnabled
-                }
-              ),
-              autoZoomToSelected && /* @__PURE__ */ jsx(
-                AutoZoomToSelected,
-                {
-                  selectedLayerId,
-                  autoZoomToSelected
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                TransformComponent,
-                {
-                  wrapperStyle,
-                  contentStyle,
-                  children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: cn("relative", widthClass),
-                      "data-testid": "transform-component",
-                      style: transformDivStyle,
-                      children: renderer
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(AddComponentsPopover, { parentLayerId: selectedPageId, enableDragToCanvas: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "secondary",
-            size: "icon",
-            className: "absolute bottom-4 left-4 size-14 md:size-10 flex items-center rounded-full bg-secondary shadow-lg z-[1000] [&_svg]:size-7 [&_svg]:md:size-4",
-            children: /* @__PURE__ */ jsx(Plus, { className: "text-secondary-foreground" })
-          }
-        ) })
-      ]
-    }
-  );
-};
-const AutoZoomToSelected = ({ selectedLayerId, autoZoomToSelected }) => {
-  const { zoomToElement } = useControls();
-  const previousSelectedLayerIdRef = useRef(null);
-  useEffect(() => {
-    if (!selectedLayerId || !zoomToElement || !autoZoomToSelected) return;
-    if (previousSelectedLayerIdRef.current === selectedLayerId) return;
-    previousSelectedLayerIdRef.current = selectedLayerId;
-    const timeoutId = setTimeout(() => {
-      const selectedElement = document.querySelector(`[data-layer-id="${selectedLayerId}"]`) || document.getElementById(`layer-${selectedLayerId}`);
-      if (selectedElement) {
-        zoomToElement(selectedElement, void 0, 300);
-      }
-    }, 100);
-    return () => clearTimeout(timeoutId);
-  }, [selectedLayerId, zoomToElement, autoZoomToSelected]);
-  return null;
-};
-
-export { EditorPanel as default };

package/dist/packages/ui/src/components/ui-builder/internal/form-fields/children-searchable-select.cjs

@@ -1,55 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const LucideIcons = require('lucide-react');
-const layerStore = require('../../../../lib/ui-builder/store/layer-store.cjs');
-const button = require('../../../button.cjs');
-const badge = require('../../../badge.cjs');
-const addComponentPopover = require('../components/add-component-popover.cjs');
-const layerUtils = require('../../../../lib/ui-builder/store/layer-utils.cjs');
-
-function ChildrenSearchableSelect({ layer, onChange }) {
-  const { selectLayer, removeLayer, selectedLayerId, findLayerById } = layerStore.useLayerStore();
-  const selectedLayer = findLayerById(selectedLayerId);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(addComponentPopover.AddComponentsPopover, { parentLayerId: layer.id, onChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      button.Button,
-      {
-        variant: "outline",
-        role: "combobox",
-        className: "w-full justify-between",
-        children: [
-          "Add Component",
-          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
-        ]
-      }
-    ) }),
-    layerUtils.hasLayerChildren(layer) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex gap-2 flex-wrap", children: selectedLayer && layerUtils.hasLayerChildren(selectedLayer) && selectedLayer.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
-      ChildLayerBadge,
-      {
-        child,
-        selectLayer,
-        removeLayer
-      },
-      child.id
-    )) })
-  ] });
-}
-function ChildLayerBadge({ child, selectLayer, removeLayer }) {
-  const handleSelect = React.useCallback(() => {
-    selectLayer(child.id);
-  }, [selectLayer, child.id]);
-  const handleRemove = React.useCallback(() => {
-    removeLayer(child.id);
-  }, [removeLayer, child.id]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(badge.Badge, { className: "flex items-center space-x-2 pl-2 pr-0 py-0", variant: "secondary", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { className: "p-0 h-5", variant: "link", size: "sm", onClick: handleSelect, children: nameForLayer(child) }),
-    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { className: "p-0 size-6 rounded-full", variant: "ghost", size: "icon", onClick: handleRemove, children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "w-4 h-4" }) })
-  ] }, child.id);
-}
-const nameForLayer = (layer) => {
-  return layer.name || layer.type.replaceAll("_", "");
-};
-
-exports.ChildrenSearchableSelect = ChildrenSearchableSelect;

package/dist/packages/ui/src/components/ui-builder/internal/form-fields/children-searchable-select.mjs

@@ -1,53 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCallback } from 'react';
-import { ChevronsUpDown, X } from 'lucide-react';
-import { useLayerStore } from '../../../../lib/ui-builder/store/layer-store.mjs';
-import { Button } from '../../../button.mjs';
-import { Badge } from '../../../badge.mjs';
-import { AddComponentsPopover } from '../components/add-component-popover.mjs';
-import { hasLayerChildren } from '../../../../lib/ui-builder/store/layer-utils.mjs';
-
-function ChildrenSearchableSelect({ layer, onChange }) {
-  const { selectLayer, removeLayer, selectedLayerId, findLayerById } = useLayerStore();
-  const selectedLayer = findLayerById(selectedLayerId);
-  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4", children: [
-    /* @__PURE__ */ jsx(AddComponentsPopover, { parentLayerId: layer.id, onChange, children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        variant: "outline",
-        role: "combobox",
-        className: "w-full justify-between",
-        children: [
-          "Add Component",
-          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
-        ]
-      }
-    ) }),
-    hasLayerChildren(layer) && /* @__PURE__ */ jsx("div", { className: "w-full flex gap-2 flex-wrap", children: selectedLayer && hasLayerChildren(selectedLayer) && selectedLayer.children.map((child) => /* @__PURE__ */ jsx(
-      ChildLayerBadge,
-      {
-        child,
-        selectLayer,
-        removeLayer
-      },
-      child.id
-    )) })
-  ] });
-}
-function ChildLayerBadge({ child, selectLayer, removeLayer }) {
-  const handleSelect = useCallback(() => {
-    selectLayer(child.id);
-  }, [selectLayer, child.id]);
-  const handleRemove = useCallback(() => {
-    removeLayer(child.id);
-  }, [removeLayer, child.id]);
-  return /* @__PURE__ */ jsxs(Badge, { className: "flex items-center space-x-2 pl-2 pr-0 py-0", variant: "secondary", children: [
-    /* @__PURE__ */ jsx(Button, { className: "p-0 h-5", variant: "link", size: "sm", onClick: handleSelect, children: nameForLayer(child) }),
-    /* @__PURE__ */ jsx(Button, { className: "p-0 size-6 rounded-full", variant: "ghost", size: "icon", onClick: handleRemove, children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" }) })
-  ] }, child.id);
-}
-const nameForLayer = (layer) => {
-  return layer.name || layer.type.replaceAll("_", "");
-};
-
-export { ChildrenSearchableSelect };

package/dist/packages/ui/src/components/ui-builder/internal/form-fields/classname-control/breakpoint-classname-control.cjs

@@ -1,169 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const tooltip = require('../../../../tooltip.cjs');
-const tabs = require('../../../../tabs.cjs');
-const classnameMultiselect = require('./classname-multiselect.cjs');
-const classnameItemControl = require('./classname-item-control.cjs');
-const accordion = require('../../../../accordion.cjs');
-const badge = require('../../../../badge.cjs');
-
-const BreakpointClassNameControl = ({
-  onChange,
-  value
-}) => {
-  const parseClassString = (str) => {
-    const tokens = str.trim().split(/\s+/);
-    const base2 = [];
-    const md2 = [];
-    const rest2 = [];
-    for (const token of tokens) {
-      if (token.startsWith("md:")) {
-        md2.push(token.slice(3));
-      } else if (token.includes(":")) {
-        rest2.push(token);
-      } else if (token) {
-        base2.push(token);
-      }
-    }
-    return {
-      base: base2.join(" "),
-      md: md2.join(" "),
-      rest: rest2.join(" ")
-    };
-  };
-  const [classString, setClassString] = React.useState(value || "");
-  const [tab, setTab] = React.useState("base");
-  React.useEffect(() => {
-    if (typeof value === "string" && value !== classString) {
-      setClassString(value);
-    }
-  }, [value]);
-  const { base, md, rest } = parseClassString(classString);
-  const handleBaseChange = React.useCallback(
-    (newBase) => {
-      const newClassString = [
-        newBase,
-        md && md.split(" ").map((cls) => `md:${cls}`).join(" "),
-        rest
-      ].filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
-      setClassString(newClassString);
-    },
-    [md, rest]
-  );
-  const handleMdChange = React.useCallback(
-    (newMd) => {
-      const mdClasses = newMd.split(" ").filter(Boolean).map((cls) => `md:${cls}`).join(" ");
-      const newClassString = [base, mdClasses, rest].filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
-      setClassString(newClassString);
-    },
-    [base, rest]
-  );
-  React.useEffect(() => {
-    if (onChange) onChange(classString);
-  }, [classString, onChange]);
-  const handleMultiselectChange = React.useCallback((newClassString) => {
-    setClassString(newClassString);
-  }, []);
-  const handleTabChange = React.useCallback(
-    (val) => setTab(val),
-    []
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: "w-full border rounded-lg",
-      "data-testid": "breakpoint-classname-control",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          tabs.Tabs,
-          {
-            value: tab,
-            onValueChange: handleTabChange,
-            className: "w-full",
-            "data-testid": "breakpoint-tabs",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                tabs.TabsList,
-                {
-                  className: "w-full grid grid-cols-2",
-                  "data-testid": "breakpoint-tabs-list",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "base", "data-testid": "base-tab-trigger", children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Base" }),
-                        base && /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { className: "ml-1 justify-center text-center px-[3px] h-[18px] min-w-[18px] !text-[10px]", children: base.split(" ").filter(Boolean).length })
-                      ] }) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Base styles for all screen sizes" })
-                    ] }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "md", "data-testid": "md-tab-trigger", children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap text-nowrap", children: "Tablet & Desktop" }),
-                        md && /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { className: "ml-1 justify-center text-center px-[3px] h-[18px] min-w-[18px] !text-[10px]", children: md.split(" ").filter(Boolean).length })
-                      ] }) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Overrides for screens larger than 768px (md:*)" })
-                    ] }) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                tabs.TabsContent,
-                {
-                  className: "mt-0",
-                  value: "base",
-                  "data-testid": "base-tab-content",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(classnameItemControl.ClassNameItemControl, { value: base, onChange: handleBaseChange })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsContent, { className: "mt-0", value: "md", "data-testid": "md-tab-content", children: /* @__PURE__ */ jsxRuntime.jsx(classnameItemControl.ClassNameItemControl, { value: md, onChange: handleMdChange }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          accordion.Accordion,
-          {
-            type: "single",
-            collapsible: true,
-            defaultValue: "",
-            "data-testid": "classes-accordion",
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              accordion.AccordionItem,
-              {
-                value: "classes",
-                className: "border-t border-b-0 px-4 [&_#accordion-content[data-state=open]]:overflow-visible [&_#accordion-content[data-state=closed]]:overflow-hidden",
-                "data-testid": "classes-accordion-item",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    accordion.AccordionTrigger,
-                    {
-                      className: "text-sm",
-                      "data-testid": "classes-accordion-trigger",
-                      children: "Edit All Classes"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    accordion.AccordionContent,
-                    {
-                      "data-testid": "classes-accordion-content",
-                      id: "accordion-content",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        classnameMultiselect,
-                        {
-                          value: classString,
-                          onChange: handleMultiselectChange
-                        }
-                      )
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
-
-exports.BreakpointClassNameControl = BreakpointClassNameControl;