@plannotator/ui 0.28.0 → 0.29.1

package/components/ThemeProvider.tsx

@@ -1,8 +1,24 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { configStore } from '../config/configStore';
+import { readThemePairCookies, writeThemePairCookies } from '../config/settings';
+import { useConfigValue } from '../config/useConfig';
 import { storage } from '../utils/storage';
-import { BUILT_IN_THEMES, type ThemeInfo } from '../utils/themeRegistry';
+import {
+  BUILT_IN_THEMES,
+  getUnsupportedMode,
+  resolvePairTheme,
+  resolveThemeMode,
+  seedThemePair,
+  setDefaultThemePair,
+  themeSupportsHalf,
+  type ThemeHalf,
+  type ThemeInfo,
+  type ThemePair,
+} from '../utils/themeRegistry';
+import type { Mode } from './themeModes';
 
-export type Mode = 'dark' | 'light' | 'system';
+// Kept here because published consumers already import Mode from ThemeProvider.
+export type { Mode } from './themeModes';
 
 type ThemeProviderState = {
   // Mode (dark/light/system) — backward-compatible with old "theme" API
@@ -10,10 +26,15 @@ type ThemeProviderState = {
   setTheme: (mode: Mode) => void;
   mode: Mode;
   setMode: (mode: Mode) => void;
+  preferredMode: 'dark' | 'light';
   resolvedMode: 'dark' | 'light';
-  // Color theme (palette)
+  // Color theme (the palette the current mode renders — pair[preferredMode])
   colorTheme: string;
   setColorTheme: (theme: string) => void;
+  // The pair itself: one palette per half, assignable independently
+  lightTheme: string;
+  darkTheme: string;
+  setHalfTheme: (half: ThemeHalf, theme: string) => void;
   availableThemes: ThemeInfo[];
 };
 
@@ -22,29 +43,21 @@ const ThemeProviderContext = createContext<ThemeProviderState>({
   setTheme: () => null,
   mode: 'dark',
   setMode: () => null,
+  preferredMode: 'dark',
   resolvedMode: 'dark',
   colorTheme: 'plannotator',
   setColorTheme: () => null,
+  lightTheme: 'plannotator',
+  darkTheme: 'plannotator',
+  setHalfTheme: () => null,
   availableThemes: BUILT_IN_THEMES,
 });
 
-/** Resolve the class string for a theme + mode combination */
-function resolveThemeClasses(themeId: string, effectiveMode: 'dark' | 'light'): string {
-  const themeInfo = BUILT_IN_THEMES.find(t => t.id === themeId);
-  const modeSupport = themeInfo?.modeSupport ?? 'both';
-
-  let applyLight = effectiveMode === 'light';
-  if (modeSupport === 'dark-only') applyLight = false;
-  if (modeSupport === 'light-only') applyLight = true;
-
-  return `theme-${themeId}${applyLight ? ' light' : ''}`;
-}
-
 /** Sync theme classes on <html> without stripping non-theme classes (e.g. transitions-ready). */
-function applyThemeClasses(themeId: string, effectiveMode: 'dark' | 'light'): void {
+function applyThemeClasses(themeId: string, resolvedMode: 'dark' | 'light'): void {
   const el = document.documentElement;
   const themeClass = `theme-${themeId}`;
-  const wantLight = resolveThemeClasses(themeId, effectiveMode).includes(' light');
+  const wantLight = resolvedMode === 'light';
 
   if (el.classList.contains(themeClass) && el.classList.contains('light') === wantLight) return;
 
@@ -66,7 +79,20 @@ interface ThemeProviderProps {
   children: React.ReactNode;
   defaultTheme?: Mode;
   defaultColorTheme?: string;
+  /**
+   * Where the mode is stored. Read when resolving the initial pair and written
+   * by the legacy mirror, so a host's already-stored preference survives the
+   * upgrade to pairs.
+   */
   storageKey?: string;
+  /**
+   * Where the single pre-pair palette is stored. Read as the migration source
+   * for both halves and kept in sync with the palette on screen.
+   *
+   * Note: the two halves themselves are a new concept with no pre-existing
+   * host data, so they always live under `plannotator-light-theme` /
+   * `plannotator-dark-theme`; these props rename only the two legacy values.
+   */
   colorThemeStorageKey?: string;
 }
 
@@ -77,18 +103,53 @@ export function ThemeProvider({
   storageKey = 'plannotator-theme',
   colorThemeStorageKey = 'plannotator-color-theme',
 }: ThemeProviderProps) {
-  const [mode, setModeState] = useState<Mode>(
-    () => (storage.getItem(storageKey) as Mode) || defaultTheme
+  const legacyKeys = useMemo(
+    () => ({ mode: storageKey, colorTheme: colorThemeStorageKey }),
+    [storageKey, colorThemeStorageKey],
   );
 
-  const [colorTheme, setColorThemeState] = useState<string>(
-    () => storage.getItem(colorThemeStorageKey) || defaultColorTheme
-  );
+  // Resolve the pair this provider starts on from ITS OWN storage keys: what
+  // the user persisted (migrating a host's pre-pair values), else these props.
+  // The config store is a singleton that may already have resolved a default of
+  // its own, so storage is asked directly rather than trusting that value.
+  const [initialPair] = useState<ThemePair>(() => {
+    const resolved = readThemePairCookies(legacyKeys)
+      ?? seedThemePair(defaultColorTheme, defaultTheme);
+    setDefaultThemePair(resolved);
+    return resolved;
+  });
+  const pendingSeed = useRef<ThemePair | null>(initialPair);
+  const [, setSeedApplied] = useState(false);
+
+  const storePair = useConfigValue('themePair');
+  const pair = pendingSeed.current ?? storePair;
+  const mode = pair.mode;
+
+  // Hand the resolved pair to the store as a SEED, not a user choice: seeding
+  // writes memory + cookies only. Routing it through set() would queue a
+  // server write of a value nobody picked, which (flushing after the server
+  // config arrives) would overwrite the user's real ~/.plannotator/config.json
+  // theme from any cookie-less visit.
+  useEffect(() => {
+    const seed = pendingSeed.current;
+    if (!seed) return;
+    pendingSeed.current = null;
+    configStore.seed('themePair', seed);
+    setSeedApplied(true);
+  }, []);
 
   const [systemIsLight, setSystemIsLight] = useState(getSystemIsLight);
 
-  // Compute resolved mode once — consumers use this instead of re-querying matchMedia
-  const resolvedMode: 'dark' | 'light' = mode === 'system' ? (systemIsLight ? 'light' : 'dark') : mode;
+  // Keep the OS-resolved preference separate from the half it selects.
+  const preferredMode: 'dark' | 'light' =
+    mode === 'system' ? (systemIsLight ? 'light' : 'dark') : mode;
+  const colorTheme = resolvePairTheme(pair, preferredMode);
+  const resolvedMode = resolveThemeMode(colorTheme, preferredMode);
+
+  // Read by the legacy setColorTheme, which must target the half on screen
+  // without re-creating its callback on every mode change.
+  const preferredModeRef = useRef(preferredMode);
+  preferredModeRef.current = preferredMode;
 
   // [P3 fix] Apply theme class synchronously during initialization to prevent
   // flash of unstyled content. CSS tokens live under .theme-* selectors, so
@@ -126,25 +187,63 @@ export function ThemeProvider({
   }, [mode]);
 
   const setMode = useCallback((newMode: Mode) => {
-    storage.setItem(storageKey, newMode);
-    setModeState(newMode);
-  }, [storageKey]);
+    configStore.set('themePair', { ...configStore.get('themePair'), mode: newMode });
+  }, []);
+
+  /** Assign one palette to one half of the pair. */
+  const setHalfTheme = useCallback((half: ThemeHalf, newTheme: string) => {
+    if (!themeSupportsHalf(newTheme, half)) return;
+    configStore.set('themePair', { ...configStore.get('themePair'), [half]: newTheme });
+  }, []);
 
+  /**
+   * Legacy single-palette API, kept for published consumers. It assigns exactly
+   * ONE half and changes nothing else:
+   *
+   *  - a palette that renders both modes goes to the half currently on screen,
+   *    leaving the other half's assignment alone;
+   *  - a mode-restricted palette goes to the half it supports without touching
+   *    the mode, because render-time resolution (`resolveThemeMode`) already
+   *    keeps a System user on a palette that can be drawn.
+   *
+   * Persistence stays cookie-only unless a host installed a serverSync
+   * transport, matching the side effects this API had before the pair existed.
+   */
   const setColorTheme = useCallback((newTheme: string) => {
-    storage.setItem(colorThemeStorageKey, newTheme);
-    setColorThemeState(newTheme);
-  }, [colorThemeStorageKey]);
+    const current = configStore.get('themePair');
+    const unsupported = getUnsupportedMode(newTheme);
+    const half: ThemeHalf = unsupported
+      ? (unsupported === 'light' ? 'dark' : 'light')
+      : preferredModeRef.current;
+    configStore.setLocal('themePair', { ...current, [half]: newTheme });
+  }, []);
+
+  // Mirror the resolved choice onto the keys older releases read, so a
+  // downgrade lands on the user's palette instead of an unstyled first frame.
+  // The pair itself is written first: a pair migrated from the legacy
+  // single-palette key is derived, and the mirror below overwrites the key it
+  // was derived from.
+  useEffect(() => {
+    writeThemePairCookies(pair, legacyKeys);
+    if (storage.getItem(colorThemeStorageKey) !== colorTheme) {
+      storage.setItem(colorThemeStorageKey, colorTheme);
+    }
+  }, [pair, colorTheme, colorThemeStorageKey, legacyKeys]);
 
   const value = useMemo<ThemeProviderState>(() => ({
     theme: mode,
     setTheme: setMode,
     mode,
     setMode,
+    preferredMode,
     resolvedMode,
     colorTheme,
     setColorTheme,
+    lightTheme: pair.light,
+    darkTheme: pair.dark,
+    setHalfTheme,
     availableThemes: BUILT_IN_THEMES,
-  }), [mode, resolvedMode, colorTheme, setMode, setColorTheme]);
+  }), [mode, preferredMode, resolvedMode, colorTheme, pair.light, pair.dark, setMode, setColorTheme, setHalfTheme]);
 
   return (
     <ThemeProviderContext.Provider value={value}>

package/components/ThemeTab.tsx

@@ -1,14 +1,63 @@
-import React from 'react';
-import { useTheme, type Mode } from './ThemeProvider';
-import { SunIcon, MoonIcon, SystemIcon } from './icons/themeIcons';
+import React, { useEffect, useState } from 'react';
+import { useTheme } from './ThemeProvider';
+import { THEME_MODES } from './themeModes';
+import { themesForHalf, type ThemeHalf } from '../utils/themeRegistry';
 
 interface ThemeTabProps {
   onPreview?: () => void;
   compact?: boolean;
 }
 
+const HALVES: { id: ThemeHalf; label: string }[] = [
+  { id: 'light', label: 'Light' },
+  { id: 'dark', label: 'Dark' },
+];
+
+const SyntaxLinesIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h7" />
+  </svg>
+);
+
 export const ThemeTab: React.FC<ThemeTabProps> = ({ onPreview, compact }) => {
-  const { mode, setMode, colorTheme, setColorTheme, availableThemes, resolvedMode } = useTheme();
+  const {
+    mode,
+    setMode,
+    lightTheme,
+    darkTheme,
+    setHalfTheme,
+    availableThemes,
+    preferredMode,
+  } = useTheme();
+
+  // Which half the grid assigns to. Follows the mode you are actually seeing,
+  // so opening Settings in dark mode edits the dark half first.
+  const [half, setHalf] = useState<ThemeHalf>(preferredMode);
+  useEffect(() => setHalf(preferredMode), [preferredMode]);
+
+  const pair: Record<ThemeHalf, string> = { light: lightTheme, dark: darkTheme };
+  const themes = themesForHalf(availableThemes, half);
+  const nameOf = (id: string) => availableThemes.find(theme => theme.id === id)?.name ?? id;
+
+  const summary = (
+    <div className={`flex items-center gap-1.5 text-[11px] text-muted-foreground ${compact ? '' : 'flex-wrap'}`}>
+      {HALVES.map(({ id, label }, index) => (
+        <React.Fragment key={id}>
+          {index > 0 && <span className="text-muted-foreground/40">·</span>}
+          <button
+            onClick={() => setHalf(id)}
+            title={`Assign the ${label.toLowerCase()} theme`}
+            className={`rounded px-1 py-0.5 transition-colors hover:bg-muted ${
+              half === id ? 'text-foreground' : ''
+            }`}
+          >
+            <span className="text-muted-foreground/70">{label}: </span>
+            <span className="font-medium">{nameOf(pair[id])}</span>
+          </button>
+        </React.Fragment>
+      ))}
+    </div>
+  );
 
   return (
     <div className={compact ? '' : 'space-y-5'}>
@@ -16,98 +65,95 @@ export const ThemeTab: React.FC<ThemeTabProps> = ({ onPreview, compact }) => {
       <div className={compact ? 'flex items-center gap-3 mb-2' : 'space-y-2'}>
         {!compact && <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Mode</label>}
         <div className="flex gap-1">
-          {(['dark', 'light', 'system'] as Mode[]).map(m => {
-            const isActive = mode === m;
-            return (
-              <button
-                key={m}
-                onClick={() => setMode(m)}
-                className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors ${
-                  isActive
-                    ? 'bg-primary text-primary-foreground'
-                    : 'bg-muted text-muted-foreground hover:text-foreground'
-                }`}
-              >
-                {m === 'dark' && (
-                  <span className="flex items-center gap-1.5">
-                    <MoonIcon className="w-3 h-3" />
-                    Dark
-                  </span>
-                )}
-                {m === 'light' && (
-                  <span className="flex items-center gap-1.5">
-                    <SunIcon className="w-3 h-3" />
-                    Light
-                  </span>
-                )}
-                {m === 'system' && (
-                  <span className="flex items-center gap-1.5">
-                    <SystemIcon className="w-3 h-3" />
-                    System
-                  </span>
-                )}
-              </button>
-            );
-          })}
+          {THEME_MODES.map(({ id, label, Icon }) => (
+            <button
+              key={id}
+              onClick={() => setMode(id)}
+              className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors ${
+                mode === id
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-muted text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              <span className="flex items-center gap-1.5">
+                <Icon className="w-3 h-3" />
+                {label}
+              </span>
+            </button>
+          ))}
         </div>
-        {compact && (
-          <span className="text-[10px] text-muted-foreground/60 ml-auto flex items-center gap-1">
-            <svg className="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h7" />
-            </svg>
-            syntax match
-          </span>
+        {!compact && (
+          <p className="text-[11px] text-muted-foreground/70">
+            System follows your OS and switches between the two themes below.
+          </p>
         )}
+        {compact && <div className="ml-auto">{summary}</div>}
       </div>
 
-      {/* Theme */}
-      <div className={compact ? '' : 'space-y-3'}>
+      {/* Theme pair */}
+      <div className={compact ? 'space-y-2' : 'space-y-3'}>
         {!compact && (
-          <div className="flex items-center justify-between border-t border-border pt-5">
-            <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Theme</label>
-            <div className="flex items-center gap-3">
-              <span className="text-[10px] text-muted-foreground/70 flex items-center gap-1">
-                <svg className="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h7" />
-                </svg>
-                = matched syntax colors
-              </span>
-              {onPreview && (
-                <button
-                  onClick={onPreview}
-                  className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-primary/10 text-primary border border-primary/20 hover:bg-primary/20 hover:border-primary/40 transition-colors"
-                >
-                  Preview Mode
-                </button>
-              )}
+          <>
+            <div className="flex items-center justify-between border-t border-border pt-5">
+              <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Theme</label>
+              <div className="flex items-center gap-3">
+                <span className="text-[10px] text-muted-foreground/70 flex items-center gap-1">
+                  <SyntaxLinesIcon className="w-2.5 h-2.5" />
+                  = matched syntax colors
+                </span>
+                {onPreview && (
+                  <button
+                    onClick={onPreview}
+                    className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-primary/10 text-primary border border-primary/20 hover:bg-primary/20 hover:border-primary/40 transition-colors"
+                  >
+                    Preview Mode
+                  </button>
+                )}
+              </div>
             </div>
-          </div>
+            {summary}
+          </>
         )}
+
+        {/* Which half the grid assigns to */}
+        <div className="flex items-center gap-2">
+          <span className="text-[11px] text-muted-foreground/70">Assigning</span>
+          <div className="flex items-center gap-0.5 rounded-lg bg-muted/50 p-0.5">
+            {HALVES.map(({ id, label }) => (
+              <button
+                key={id}
+                onClick={() => setHalf(id)}
+                aria-pressed={half === id}
+                className={`rounded-md px-2.5 py-1 text-[11px] font-medium transition-colors ${
+                  half === id
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground'
+                }`}
+              >
+                {label} theme
+              </button>
+            ))}
+          </div>
+        </div>
+
         <div className={`grid gap-2 overflow-y-auto pr-1 ${compact ? 'grid-cols-4' : 'grid-cols-3'}`}>
-          {availableThemes.map(theme => {
-            const isSelected = colorTheme === theme.id;
-            const colors = theme.colors[resolvedMode];
-            const modeUnavailable =
-              (resolvedMode === 'light' && theme.modeSupport === 'dark-only') ||
-              (resolvedMode === 'dark' && theme.modeSupport === 'light-only');
+          {themes.map(theme => {
+            const isSelected = pair[half] === theme.id;
+            const colors = theme.colors[half];
             return (
               <button
                 key={theme.id}
-                onClick={() => setColorTheme(theme.id)}
+                onClick={() => setHalfTheme(half, theme.id)}
                 className={`relative p-2 rounded-md border text-left transition-colors ${
                   isSelected
                     ? 'border-primary bg-primary/5'
-                    : modeUnavailable
-                      ? 'border-border/50 opacity-45'
-                      : 'border-border hover:border-muted-foreground/30 hover:bg-muted/30'
+                    : 'border-border hover:border-muted-foreground/30 hover:bg-muted/30'
                 }`}
               >
                 {/* Syntax highlighting badge */}
                 {theme.syntaxHighlighting && (
                   <div className="absolute top-1 right-1" title="Matched syntax highlighting in diffs">
-                    <svg className="w-2.5 h-2.5 text-muted-foreground/50" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h7" />
-                    </svg>
+                    <SyntaxLinesIcon className="w-2.5 h-2.5 text-muted-foreground/50" />
                   </div>
                 )}
                 {/* Color swatches */}

package/components/ToolbarButtons.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Button } from './ui/button';
 import { cn } from '../lib/utils';
-import { Send, Check } from 'lucide-react';
+import { Send, Check, X } from 'lucide-react';
+
+type ToolbarLabelBreakpoint = 'md' | 'lg';
 
 interface FeedbackButtonProps {
   onClick: () => void;
@@ -13,6 +15,7 @@ interface FeedbackButtonProps {
   shortLoadingLabel?: string;
   title?: string;
   muted?: boolean;
+  labelBreakpoint?: ToolbarLabelBreakpoint;
 }
 
 export const FeedbackButton: React.FC<FeedbackButtonProps> = ({
@@ -25,6 +28,7 @@ export const FeedbackButton: React.FC<FeedbackButtonProps> = ({
   shortLoadingLabel,
   title = 'Send Feedback',
   muted = false,
+  labelBreakpoint = 'md',
 }) => (
   <Button
     variant="outline"
@@ -37,11 +41,17 @@ export const FeedbackButton: React.FC<FeedbackButtonProps> = ({
   >
     {shortLabel ? (
       <>
-        <span className="hidden md:inline lg:hidden">{isLoading ? (shortLoadingLabel ?? loadingLabel) : shortLabel}</span>
-        <span className="hidden lg:inline">{isLoading ? loadingLabel : label}</span>
+        <span className={labelBreakpoint === 'lg' ? 'hidden lg:inline xl:hidden' : 'hidden md:inline lg:hidden'}>
+          {isLoading ? (shortLoadingLabel ?? loadingLabel) : shortLabel}
+        </span>
+        <span className={labelBreakpoint === 'lg' ? 'hidden xl:inline' : 'hidden lg:inline'}>
+          {isLoading ? loadingLabel : label}
+        </span>
       </>
     ) : (
-      <span className="hidden md:inline">{isLoading ? loadingLabel : label}</span>
+      <span className={labelBreakpoint === 'lg' ? 'hidden lg:inline' : 'hidden md:inline'}>
+        {isLoading ? loadingLabel : label}
+      </span>
     )}
   </Button>
 );
@@ -57,6 +67,7 @@ export interface ApproveButtonProps {
   title?: string;
   dimmed?: boolean;
   muted?: boolean;
+  labelBreakpoint?: ToolbarLabelBreakpoint;
 }
 
 export const ApproveButton: React.FC<ApproveButtonProps> = ({
@@ -70,6 +81,7 @@ export const ApproveButton: React.FC<ApproveButtonProps> = ({
   title,
   dimmed = false,
   muted = false,
+  labelBreakpoint = 'md',
 }) => (
   <Button
     variant="success"
@@ -84,8 +96,12 @@ export const ApproveButton: React.FC<ApproveButtonProps> = ({
       dimmed && !muted && !disabled && 'bg-success/50 text-success-foreground/70 hover:bg-success hover:text-success-foreground',
     )}
   >
-    <span className="md:hidden">{isLoading ? mobileLoadingLabel : mobileLabel}</span>
-    <span className="hidden md:inline">{isLoading ? loadingLabel : label}</span>
+    <span className={labelBreakpoint === 'lg' ? 'lg:hidden' : 'md:hidden'}>
+      {isLoading ? mobileLoadingLabel : mobileLabel}
+    </span>
+    <span className={labelBreakpoint === 'lg' ? 'hidden lg:inline' : 'hidden md:inline'}>
+      {isLoading ? loadingLabel : label}
+    </span>
   </Button>
 );
 
@@ -94,6 +110,7 @@ interface ExitButtonProps {
   disabled?: boolean;
   isLoading?: boolean;
   title?: string;
+  labelBreakpoint?: ToolbarLabelBreakpoint;
 }
 
 export const ExitButton: React.FC<ExitButtonProps> = ({
@@ -101,6 +118,7 @@ export const ExitButton: React.FC<ExitButtonProps> = ({
   disabled = false,
   isLoading = false,
   title = 'Close session without sending feedback',
+  labelBreakpoint = 'md',
 }) => (
   <Button
     variant="secondary"
@@ -108,9 +126,12 @@ export const ExitButton: React.FC<ExitButtonProps> = ({
     onClick={onClick}
     disabled={disabled || isLoading}
     title={title}
+    aria-label={title}
     className="bg-muted text-muted-foreground hover:bg-muted/80"
   >
-    <span className="md:hidden">{isLoading ? '...' : '✕'}</span>
-    <span className="hidden md:inline">{isLoading ? 'Closing...' : 'Close'}</span>
+    <span className={labelBreakpoint === 'lg' ? 'lg:hidden' : 'md:hidden'}>
+      {isLoading ? '…' : <X className="size-3.5" aria-hidden="true" />}
+    </span>
+    <span className={labelBreakpoint === 'lg' ? 'hidden lg:inline' : 'hidden md:inline'}>{isLoading ? 'Closing...' : 'Close'}</span>
   </Button>
 );