astro-tractstack 2.0.46 → 2.1.0

package/templates/src/components/edit/panels/StyleWidgetPanel.tsx

@@ -288,7 +288,7 @@ const StyleWidgetPanel = ({
         <h3 className="text-xl font-bold">Setup {widgetName}</h3>
 
         <div className="pb-2">
-          <div className="text-myblack hover:bg-mygreen/20 w-fit rounded border border-slate-200 p-2 text-sm">
+          <div className="w-fit rounded border border-slate-200 p-2 text-sm text-myblack hover:bg-mygreen/20">
             <div
               title="Configure this Widget"
               className="flex items-center gap-2 font-bold"
@@ -322,14 +322,14 @@ const StyleWidgetPanel = ({
           )}
 
           <div className="space-y-4">
-            <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+            <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
               <li>
                 <em>Actions:</em>
               </li>
               <li>
                 <button
                   onClick={handleImgAdd}
-                  className="text-myblue font-bold underline hover:text-black"
+                  className="font-bold text-myblue underline hover:text-black"
                 >
                   Add Style
                 </button>
@@ -366,14 +366,14 @@ const StyleWidgetPanel = ({
         )}
 
         <div className="space-y-4">
-          <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+          <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
             <li>
               <em>Actions:</em>
             </li>
             <li>
               <button
                 onClick={handleContainerAdd}
-                className="text-myblue font-bold underline hover:text-black"
+                className="font-bold text-myblue underline hover:text-black"
               >
                 Add Style
               </button>
@@ -407,14 +407,14 @@ const StyleWidgetPanel = ({
         )}
 
         <div className="space-y-4">
-          <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+          <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
             <li>
               <em>Actions:</em>
             </li>
             <li>
               <button
                 onClick={handleOuterAdd}
-                className="text-myblue font-bold underline hover:text-black"
+                className="font-bold text-myblue underline hover:text-black"
               >
                 Add Style
               </button>

package/templates/src/components/edit/panels/StyleWidgetPanel_add.tsx

@@ -214,9 +214,9 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
           id="show-advanced"
           checked={showAdvanced}
           onChange={(e) => setShowAdvanced(e.target.checked)}
-          className="border-mydarkgrey h-4 w-4 rounded text-cyan-600 focus:ring-cyan-600"
+          className="h-4 w-4 rounded border-mydarkgrey text-cyan-600 focus:ring-cyan-600"
         />
-        <label htmlFor="show-advanced" className="text-mydarkgrey text-sm">
+        <label htmlFor="show-advanced" className="text-sm text-mydarkgrey">
           Show Advanced Styles
         </label>
       </div>
@@ -238,13 +238,13 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
           <Combobox.Control ref={comboboxRef}>
             <div className="relative">
               <Combobox.Input
-                className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md py-2 pl-3 pr-10 text-xl shadow-sm"
+                className="w-full rounded-md border-mydarkgrey py-2 pl-3 pr-10 text-xl shadow-sm focus:border-myblue focus:ring-myblue"
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Search styles..."
               />
               <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
                 <ChevronUpDownIcon
-                  className="text-mydarkgrey h-5 w-5"
+                  className="h-5 w-5 text-mydarkgrey"
                   aria-hidden="true"
                 />
               </Combobox.Trigger>
@@ -255,7 +255,7 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
             <Combobox.Positioner style={{ zIndex: 1002 }}>
               <Combobox.Content className="max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                 {collection.items.length === 0 ? (
-                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                  <div className="relative cursor-default select-none px-4 py-2 text-mydarkgrey">
                     Nothing found.
                   </div>
                 ) : (
@@ -291,7 +291,7 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
               <button
                 key={style.key}
                 onClick={() => handleSelect({ value: [style.key] })}
-                className="hover:bg-mygreen/20 inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200"
+                className="inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200 hover:bg-mygreen/20"
               >
                 <span className="font-bold">{style.title}</span>
               </button>

package/templates/src/components/edit/panels/StyleWidgetPanel_remove.tsx

@@ -126,7 +126,7 @@ const StyleWidgetRemovePanel = ({
         <span className="ml-1">from {elementTypeTitle}?</span>
       </h3>
       <div className="space-y-4 rounded bg-slate-50 p-6">
-        <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+        <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
           <li>
             <em>Are you sure?</em>
           </li>

package/templates/src/components/edit/panels/StyleWidgetPanel_update.tsx

@@ -269,16 +269,16 @@ const StyleWidgetUpdatePanel = ({
           type="checkbox"
           checked={isOverridden}
           onChange={(e) => handleToggleOverride(e.target.checked)}
-          className="border-mydarkgrey text-myorange focus:ring-myorange h-4 w-4 rounded"
+          className="h-4 w-4 rounded border-mydarkgrey text-myorange focus:ring-myorange"
         />
-        <span className="text-mydarkgrey text-sm">
+        <span className="text-sm text-mydarkgrey">
           {isOverridden
             ? 'Override mode. Styling this element only.'
             : 'You are in quick styles mode. Click to override this element.'}
         </span>
       </div>
 
-      <div className="text-mydarkgrey my-3 flex flex-col gap-y-2.5 text-xl">
+      <div className="my-3 flex flex-col gap-y-2.5 text-xl text-mydarkgrey">
         <ViewportComboBox
           value={mobileValue}
           onFinalChange={handleFinalChange}

package/templates/src/components/edit/panels/StyleWordCarouselPanel.tsx

@@ -132,7 +132,7 @@ const StyleWordCarouselPanel = ({ node }: StyleWordCarouselPanelProps) => {
           Words (one per line)
         </label>
         <textarea
-          className="focus:border-myblue focus:ring-myblue w-full rounded border border-gray-300 p-2 text-sm focus:ring-1"
+          className="w-full rounded border border-gray-300 p-2 text-sm focus:border-myblue focus:ring-1 focus:ring-myblue"
           rows={5}
           value={words}
           onChange={(e) => handleWordsChange(e.target.value)}

package/templates/src/components/edit/state/SaveModal.tsx

@@ -90,7 +90,7 @@ const SandboxUpgradeNotice = ({ onClose }: { onClose: () => void }) => (
             <div className="mt-6 flex justify-center gap-3">
               <a
                 href="/sandbox/register"
-                className="bg-myblue hover:bg-myorange rounded-md px-4 py-2 font-bold text-white"
+                className="rounded-md bg-myblue px-4 py-2 font-bold text-white hover:bg-myorange"
               >
                 Sign Up Now
               </a>

package/templates/src/components/edit/state/SaveToLibraryModal.tsx

@@ -138,7 +138,7 @@ export function SaveToLibraryModal({
 
   return (
     <div
-      className="z-105 fixed inset-0 flex items-center justify-center bg-black bg-opacity-75"
+      className="fixed inset-0 z-105 flex items-center justify-center bg-black bg-opacity-75"
       onClick={saveState === 'idle' ? onClose : undefined}
     >
       <div
@@ -165,7 +165,7 @@ export function SaveToLibraryModal({
               id="category-select"
               value={selectedCategory}
               onChange={(e) => setSelectedCategory(e.target.value)}
-              className="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm"
+              className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-cyan-500 focus:outline-none focus:ring-cyan-500"
             >
               {categories.map((cat) => (
                 <option key={cat} value={cat}>

package/templates/src/components/edit/state/StylesMemory.tsx

@@ -291,7 +291,7 @@ export const StylesMemory = ({ node, parentNode }: StylesMemoryProps) => {
           disabled={!hasMemory || isMatchingMemory}
           className={`transition-colors ${
             !hasMemory || isMatchingMemory
-              ? 'text-mylightgrey cursor-not-allowed'
+              ? 'cursor-not-allowed text-mylightgrey'
               : 'text-mydarkgrey hover:text-black'
           }`}
           title={

package/templates/src/components/edit/storyfragment/StoryFragmentConfigPanel.tsx

@@ -134,7 +134,7 @@ const StoryFragmentConfigPanel = ({
     // Set SEO ready if description exists and is not empty
     const hasValidDescription = Boolean(
       storyFragmentContent?.description &&
-        storyFragmentContent.description.trim() !== ''
+      storyFragmentContent.description.trim() !== ''
     );
 
     setIsSEOReady(hasValidDescription);

package/templates/src/components/edit/storyfragment/StoryFragmentPanel_menu.tsx

@@ -271,20 +271,20 @@ const StoryFragmentMenuPanel = ({
               >
                 <div className="relative">
                   <Combobox.Input
-                    className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md border py-2 pl-3 pr-10 text-sm shadow-sm"
+                    className="w-full rounded-md border border-mydarkgrey py-2 pl-3 pr-10 text-sm shadow-sm focus:border-myblue focus:ring-myblue"
                     onChange={(e) => setQuery(e.target.value)}
                     placeholder="Select a menu..."
                   />
                   <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
                     <ChevronUpDownIcon
-                      className="text-mydarkgrey h-5 w-5"
+                      className="h-5 w-5 text-mydarkgrey"
                       aria-hidden="true"
                     />
                   </Combobox.Trigger>
                 </div>
-                <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                <Combobox.Content className="sm:text-sm absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                   {filteredMenus.length === 0 && query !== '' ? (
-                    <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                    <div className="relative cursor-default select-none px-4 py-2 text-mydarkgrey">
                       Nothing found.
                     </div>
                   ) : (
@@ -295,7 +295,7 @@ const StoryFragmentMenuPanel = ({
                         className="menu-item relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900"
                       >
                         <span className="block truncate">{menu.title}</span>
-                        <span className="menu-indicator text-myblue absolute inset-y-0 left-0 flex items-center pl-3">
+                        <span className="menu-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-myblue">
                           <CheckIcon className="h-5 w-5" aria-hidden="true" />
                         </span>
                       </Combobox.Item>

package/templates/src/components/edit/widgets/BunnyWidget.tsx

@@ -382,7 +382,7 @@ function BunnyWidget({ node, onUpdate }: BunnyWidgetProps) {
                   </Dialog.Title>
                 </div>
                 <div className="flex-1 overflow-y-auto p-4">
-                  <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                  <div className="lg:grid-cols-2 grid grid-cols-1 gap-4">
                     <div className="rounded-lg border border-gray-200 bg-white shadow-sm">
                       <div className="flex items-center justify-between border-b border-gray-200 p-3">
                         <h3 className="text-base font-bold text-gray-900">
@@ -433,7 +433,7 @@ function BunnyWidget({ node, onUpdate }: BunnyWidgetProps) {
                                   onBlur={() =>
                                     handleUpdate(videoId, title, chapters)
                                   }
-                                  className={`mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm sm:text-sm ${formErrors[`title-${index}`] ? 'border-red-300' : 'focus:border-cyan-500 focus:ring-cyan-500'}`}
+                                  className={`sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm ${formErrors[`title-${index}`] ? 'border-red-300' : 'focus:border-cyan-500 focus:ring-cyan-500'}`}
                                 />
                               </div>
                               <div>
@@ -451,7 +451,7 @@ function BunnyWidget({ node, onUpdate }: BunnyWidgetProps) {
                                   onBlur={() =>
                                     handleUpdate(videoId, title, chapters)
                                   }
-                                  className="mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+                                  className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
                                 />
                               </div>
                               <div className="grid grid-cols-2 gap-2">
@@ -472,7 +472,7 @@ function BunnyWidget({ node, onUpdate }: BunnyWidgetProps) {
                                     onBlur={() =>
                                       handleUpdate(videoId, title, chapters)
                                     }
-                                    className={`mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm sm:text-sm ${formErrors[`startTime-${index}`] || formErrors[`overlap-${index}`] ? 'border-red-300' : 'focus:border-cyan-500 focus:ring-cyan-500'}`}
+                                    className={`sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm ${formErrors[`startTime-${index}`] || formErrors[`overlap-${index}`] ? 'border-red-300' : 'focus:border-cyan-500 focus:ring-cyan-500'}`}
                                   />
                                 </div>
                                 <div>
@@ -491,7 +491,7 @@ function BunnyWidget({ node, onUpdate }: BunnyWidgetProps) {
                                     onBlur={() =>
                                       handleUpdate(videoId, title, chapters)
                                     }
-                                    className={`mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm sm:text-sm ${formErrors[`endTime-${index}`] || formErrors[`overlap-${index}`] ? 'border-red-300' : 'focus:border-cyan-500 focus:ring-cyan-500'}`}
+                                    className={`sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-2 py-1 shadow-sm ${formErrors[`endTime-${index}`] || formErrors[`overlap-${index}`] ? 'border-red-300' : 'focus:border-cyan-500 focus:ring-cyan-500'}`}
                                   />
                                 </div>
                               </div>

package/templates/src/components/edit/widgets/InteractiveDisclosureWidget.tsx

@@ -621,7 +621,7 @@ export default function InteractiveDisclosureWidget({
                         <h3 className="font-bold text-gray-800">
                           Widget Styles
                         </h3>
-                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                        <div className="sm:grid-cols-3 grid grid-cols-1 gap-4">
                           <div>
                             <ColorPickerCombo
                               title="Background Color"

package/templates/src/components/edit/widgets/SignupWidget.tsx

@@ -124,7 +124,7 @@ function SignupWidget({ node, onUpdate }: SignupWidgetProps) {
         >
           <div className="relative mt-1">
             <Combobox.Input
-              className="focus:border-myblue focus:ring-myblue w-full rounded-md border border-gray-300 py-2 pl-3 pr-10 text-sm shadow-sm"
+              className="w-full rounded-md border border-gray-300 py-2 pl-3 pr-10 text-sm shadow-sm focus:border-myblue focus:ring-myblue"
               placeholder="Select contact persona..."
               defaultValue={selectedPersonaTitle}
             />
@@ -135,7 +135,7 @@ function SignupWidget({ node, onUpdate }: SignupWidgetProps) {
               />
             </Combobox.Trigger>
           </div>
-          <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+          <Combobox.Content className="sm:text-sm absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             {collection.items.length === 0 ? (
               <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
                 Nothing found.
@@ -151,7 +151,7 @@ function SignupWidget({ node, onUpdate }: SignupWidgetProps) {
                   <span className="block text-sm text-gray-500">
                     {persona.description}
                   </span>
-                  <span className="persona-indicator text-myblue absolute inset-y-0 left-0 flex items-center pl-3">
+                  <span className="persona-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-myblue">
                     <CheckIcon className="h-5 w-5" aria-hidden="true" />
                   </span>
                 </Combobox.Item>

package/templates/src/components/fields/ActionBuilderTimeSelector.tsx

@@ -109,11 +109,11 @@ function TimeSelectModal({
               value={manualTime}
               onChange={handleManualTimeChange}
               placeholder="Enter time in seconds"
-              className="focus:ring-myorange rounded border px-3 py-2 focus:outline-none focus:ring-2"
+              className="rounded border px-3 py-2 focus:outline-none focus:ring-2 focus:ring-myorange"
             />
             <button
               onClick={handleSeekToTime}
-              className="bg-myblue rounded px-4 py-2 text-white hover:bg-blue-600"
+              className="rounded bg-myblue px-4 py-2 text-white hover:bg-blue-600"
             >
               Seek
             </button>
@@ -128,7 +128,7 @@ function TimeSelectModal({
             </button>
             <button
               onClick={handleGetCurrentTime}
-              className="bg-myorange rounded px-4 py-2 text-white hover:bg-orange-600"
+              className="rounded bg-myorange px-4 py-2 text-white hover:bg-orange-600"
             >
               Use Current Time {currentTime > 0 ? `(${currentTime}s)` : ''}
             </button>
@@ -258,7 +258,7 @@ export default function ActionBuilderTimeSelector({
         >
           <div className="relative">
             <Combobox.Input
-              className="focus:border-myblue focus:ring-myblue w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm"
+              className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-myblue focus:ring-myblue"
               placeholder={placeholder}
               autoComplete="off"
             />
@@ -270,7 +270,7 @@ export default function ActionBuilderTimeSelector({
             </Combobox.Trigger>
           </div>
 
-          <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+          <Combobox.Content className="sm:text-sm absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             {availableVideos.length > 0 ? (
               collection.items.length === 0 ? (
                 <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
@@ -326,14 +326,14 @@ export default function ActionBuilderTimeSelector({
             {value !== '' && (
               <button
                 onClick={() => handleTimeSelect(value)}
-                className="bg-myblue rounded px-4 py-2 text-white hover:bg-blue-600"
+                className="rounded bg-myblue px-4 py-2 text-white hover:bg-blue-600"
               >
                 Start at {value}s
               </button>
             )}
             <button
               onClick={() => setShowModal(true)}
-              className="bg-myorange rounded px-4 py-2 text-white hover:bg-orange-600"
+              className="rounded bg-myorange px-4 py-2 text-white hover:bg-orange-600"
             >
               Find Time
             </button>

package/templates/src/components/fields/ArtpackImage.tsx

@@ -265,9 +265,9 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
             ></div>
             <button
               onClick={handleRemoveImage}
-              className="hover:bg-mylightgrey absolute right-2 top-2 rounded-full bg-white p-1 shadow-md"
+              className="absolute right-2 top-2 rounded-full bg-white p-1 shadow-md hover:bg-mylightgrey"
             >
-              <XMarkIcon className="text-mydarkgrey h-4 w-4" />
+              <XMarkIcon className="h-4 w-4 text-mydarkgrey" />
             </button>
           </div>
         )}
@@ -275,7 +275,7 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
         <div className="flex items-center justify-between">
           <button
             onClick={() => setIsModalOpen(true)}
-            className="text-myblue flex items-center text-sm hover:text-cyan-600"
+            className="flex items-center text-sm text-myblue hover:text-cyan-600"
           >
             <SwatchIcon className="mr-1 h-4 w-4" />
             {previewUrl ? 'Change Artpack Image' : 'Use Artpack Image'}
@@ -300,7 +300,7 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
                     onChange={() =>
                       handleObjectFitChange(fit as 'cover' | 'contain' | 'fill')
                     }
-                    className="text-myblue focus:ring-myblue h-4 w-4 border-gray-300"
+                    className="h-4 w-4 border-gray-300 text-myblue focus:ring-myblue"
                   />
                   <span className="ml-2 text-sm capitalize text-gray-700">
                     {fit}
@@ -328,7 +328,7 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
                         e.target.checked
                       )
                     }
-                    className="text-myblue focus:ring-myblue h-4 w-4 rounded border-gray-300"
+                    className="h-4 w-4 rounded border-gray-300 text-myblue focus:ring-myblue"
                   />
                   <span className="ml-2 text-sm capitalize text-gray-700">
                     {viewport}
@@ -367,7 +367,7 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
               ) : (
                 <div className="space-y-6">
                   <div>
-                    <label className="text-mydarkgrey mb-2 block text-sm font-bold">
+                    <label className="mb-2 block text-sm font-bold text-mydarkgrey">
                       Select Collection
                     </label>
                     <Combobox.Root
@@ -382,20 +382,20 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
                       composite={true}
                     >
                       <div className="relative">
-                        <div className="focus-within:border-myblue focus-within:ring-myblue relative w-full cursor-default overflow-hidden rounded-lg border border-gray-300 bg-white text-left shadow-sm focus-within:ring-1">
+                        <div className="relative w-full cursor-default overflow-hidden rounded-lg border border-gray-300 bg-white text-left shadow-sm focus-within:border-myblue focus-within:ring-1 focus-within:ring-myblue">
                           <Combobox.Input
-                            className="text-mydarkgrey w-full border-none py-2 pl-3 pr-10 text-sm leading-5 focus:ring-0"
+                            className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-mydarkgrey focus:ring-0"
                             placeholder="Select a collection..."
                             autoComplete="off"
                           />
                           <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
                             <ChevronUpDownIcon
-                              className="text-mydarkgrey h-5 w-5"
+                              className="h-5 w-5 text-mydarkgrey"
                               aria-hidden="true"
                             />
                           </Combobox.Trigger>
                         </div>
-                        <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                        <Combobox.Content className="sm:text-sm absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                           {collection.items.length === 0 ? (
                             <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
                               No collections found.
@@ -405,7 +405,7 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
                               <Combobox.Item
                                 key={item}
                                 item={item}
-                                className="collection-item text-mydarkgrey relative cursor-default select-none py-2 pl-10 pr-4"
+                                className="collection-item relative cursor-default select-none py-2 pl-10 pr-4 text-mydarkgrey"
                               >
                                 <span className="block truncate">{item}</span>
                                 <span className="collection-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
@@ -426,10 +426,10 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
                   selectedCollection &&
                   availableImages.length > 0 ? (
                     <div>
-                      <label className="text-mydarkgrey mb-2 block text-sm font-bold">
+                      <label className="mb-2 block text-sm font-bold text-mydarkgrey">
                         Select Image from {selectedCollection}
                       </label>
-                      <div className="grid grid-cols-2 gap-4 p-2 sm:grid-cols-3 md:grid-cols-4">
+                      <div className="sm:grid-cols-3 grid grid-cols-2 gap-4 p-2 md:grid-cols-4">
                         {availableImages.map((image) => (
                           <div
                             key={image}
@@ -451,7 +451,7 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
                               className="aspect-video w-full object-cover"
                             />
                             <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 transition-opacity hover:bg-opacity-20">
-                              <span className="text-mydarkgrey max-w-full truncate rounded bg-white bg-opacity-80 px-2 py-1 text-xs">
+                              <span className="max-w-full truncate rounded bg-white bg-opacity-80 px-2 py-1 text-xs text-mydarkgrey">
                                 {image}
                               </span>
                             </div>
@@ -466,7 +466,7 @@ const ArtpackImage = ({ paneId, onUpdate }: ArtpackImageProps) => {
                   ) : null}
 
                   <div className="mt-4 flex justify-end space-x-3">
-                    <Dialog.CloseTrigger className="bg-mylightgrey text-mydarkgrey rounded px-4 py-2 hover:bg-gray-300">
+                    <Dialog.CloseTrigger className="rounded bg-mylightgrey px-4 py-2 text-mydarkgrey hover:bg-gray-300">
                       Cancel
                     </Dialog.CloseTrigger>
                   </div>

package/templates/src/components/fields/BackgroundImage.tsx

@@ -338,9 +338,9 @@ const BackgroundImage = ({ paneId, onUpdate }: BackgroundImageProps) => {
             <button
               onClick={handleRemoveImage}
               disabled={isProcessing}
-              className="hover:bg-mylightgrey absolute right-2 top-2 rounded-full bg-white p-1 shadow-md disabled:opacity-50"
+              className="absolute right-2 top-2 rounded-full bg-white p-1 shadow-md hover:bg-mylightgrey disabled:opacity-50"
             >
-              <XMarkIcon className="text-mydarkgrey h-4 w-4" />
+              <XMarkIcon className="h-4 w-4 text-mydarkgrey" />
             </button>
           </div>
         ) : null}
@@ -350,7 +350,7 @@ const BackgroundImage = ({ paneId, onUpdate }: BackgroundImageProps) => {
             <button
               onClick={() => fileInputRef.current?.click()}
               disabled={isProcessing}
-              className={`text-myblue flex items-center text-sm hover:text-cyan-600`}
+              className={`flex items-center text-sm text-myblue hover:text-cyan-600`}
             >
               <ArrowUpTrayIcon className="mr-1 h-4 w-4" />
               {isProcessing
@@ -362,7 +362,7 @@ const BackgroundImage = ({ paneId, onUpdate }: BackgroundImageProps) => {
 
             <button
               onClick={() => setIsSelectingFile(true)}
-              className="text-myblue flex items-center text-sm hover:text-cyan-600"
+              className="flex items-center text-sm text-myblue hover:text-cyan-600"
             >
               <FolderIcon className="mr-1 h-4 w-4" />
               Select Image
@@ -399,7 +399,7 @@ const BackgroundImage = ({ paneId, onUpdate }: BackgroundImageProps) => {
                     onChange={() =>
                       handleObjectFitChange(fit as 'cover' | 'contain' | 'fill')
                     }
-                    className="text-myblue focus:ring-myblue h-4 w-4 border-gray-300"
+                    className="h-4 w-4 border-gray-300 text-myblue focus:ring-myblue"
                   />
                   <span className="ml-2 text-sm capitalize text-gray-700">
                     {fit}
@@ -427,7 +427,7 @@ const BackgroundImage = ({ paneId, onUpdate }: BackgroundImageProps) => {
                         e.target.checked
                       )
                     }
-                    className="text-myblue focus:ring-myblue h-4 w-4 rounded border-gray-300"
+                    className="h-4 w-4 rounded border-gray-300 text-myblue focus:ring-myblue"
                   />
                   <span className="ml-2 text-sm capitalize text-gray-700">
                     {viewport}
@@ -450,7 +450,7 @@ const BackgroundImage = ({ paneId, onUpdate }: BackgroundImageProps) => {
               value={localAltDescription}
               onChange={(e) => setLocalAltDescription(e.target.value)}
               onBlur={handleAltDescriptionBlur}
-              className="border-mylightgrey focus:border-myblue focus:ring-myblue block w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1"
+              className="block w-full rounded-md border border-mylightgrey px-3 py-2 text-sm focus:border-myblue focus:outline-none focus:ring-1 focus:ring-myblue"
               placeholder="Describe this image for accessibility"
             />
           </div>
@@ -479,20 +479,20 @@ const BackgroundImage = ({ paneId, onUpdate }: BackgroundImageProps) => {
             <Combobox.Control className="relative">
               <Combobox.Input
                 placeholder="Search files..."
-                className="border-mylightgrey focus:border-myblue focus:ring-myblue block w-full rounded-md border px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-1"
+                className="block w-full rounded-md border border-mylightgrey px-3 py-2 pr-10 text-sm focus:border-myblue focus:outline-none focus:ring-1 focus:ring-myblue"
               />
               <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
-                <ChevronUpDownIcon className="text-mydarkgrey h-5 w-5" />
+                <ChevronUpDownIcon className="h-5 w-5 text-mydarkgrey" />
               </Combobox.Trigger>
             </Combobox.Control>
 
             <Combobox.Positioner>
-              <Combobox.Content className="border-mylightgrey max-h-60 w-full overflow-auto rounded-md border bg-white shadow-lg">
+              <Combobox.Content className="max-h-60 w-full overflow-auto rounded-md border border-mylightgrey bg-white shadow-lg">
                 {collection.items.map((file) => (
                   <Combobox.Item
                     key={file.id}
                     item={file}
-                    className="file-item hover:bg-mylightgrey relative cursor-pointer select-none px-3 py-2 text-sm"
+                    className="file-item relative cursor-pointer select-none px-3 py-2 text-sm hover:bg-mylightgrey"
                   >
                     <div className="flex items-center justify-between">
                       <div className="flex flex-1 items-center">
@@ -511,13 +511,13 @@ const BackgroundImage = ({ paneId, onUpdate }: BackgroundImageProps) => {
                             {file.altDescription || file.filename}
                           </div>
                           {file.altDescription && (
-                            <div className="text-mydarkgrey text-xs">
+                            <div className="text-xs text-mydarkgrey">
                               {file.filename}
                             </div>
                           )}
                         </div>
                       </div>
-                      <CheckIcon className="file-indicator text-myblue h-4 w-4 flex-shrink-0" />
+                      <CheckIcon className="file-indicator h-4 w-4 flex-shrink-0 text-myblue" />
                     </div>
                   </Combobox.Item>
                 ))}

package/templates/src/components/fields/BackgroundImageWrapper.tsx

@@ -163,7 +163,7 @@ const BackgroundImageWrapper = ({ paneId }: BackgroundImageWrapperProps) => {
         allowNull={true}
       />
       {!bgNode && (
-        <div className="flex flex-col gap-4 sm:flex-row">
+        <div className="sm:flex-row flex flex-col gap-4">
           <div className="flex-1">
             <h4 className="mb-2 text-sm font-bold text-gray-700">
               Background Image
@@ -204,7 +204,7 @@ const BackgroundImageWrapper = ({ paneId }: BackgroundImageWrapperProps) => {
                 Position
               </Select.Label>
               <Select.Control>
-                <Select.Trigger className="focus:border-myblue focus:ring-myblue flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1">
+                <Select.Trigger className="flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-myblue focus:outline-none focus:ring-1 focus:ring-myblue">
                   <Select.ValueText
                     className="capitalize"
                     placeholder="Select a position"
@@ -249,7 +249,7 @@ const BackgroundImageWrapper = ({ paneId }: BackgroundImageWrapperProps) => {
                       value={s}
                       checked={size === s}
                       onChange={() => handleSizeChange(s)}
-                      className="text-myblue focus:ring-myblue h-4 w-4 border-gray-300"
+                      className="h-4 w-4 border-gray-300 text-myblue focus:ring-myblue"
                     />
                     <span className="ml-2 text-sm capitalize text-gray-700">
                       {s === 'narrow'