astro-tractstack 2.3.1 → 2.3.2

package/templates/src/components/codehooks/EpinetTableView.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
+import { classNames } from '@/utils/helpers';
 import { epinetCustomFilters } from '@/stores/analytics';
 import { Accordion } from '@ark-ui/react';
 import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
@@ -68,6 +69,7 @@ const EpinetTableView = ({
   const [currentDay, setCurrentDay] = useState<string | null>(null);
   const [availableDays, setAvailableDays] = useState<string[]>([]);
   const [currentDayIndex, setCurrentDayIndex] = useState(0);
+  const [openAccordionValues, setOpenAccordionValues] = useState<string[]>([]);
 
   const getContentInfo = (
     contentId: string
@@ -215,6 +217,12 @@ const EpinetTableView = ({
     setCurrentDay(availableDays[newIndex]);
   };
 
+  useEffect(() => {
+    setOpenAccordionValues((prev) =>
+      prev.filter((v) => !v.startsWith('empty-'))
+    );
+  }, [currentDay]);
+
   const getCurrentDayData = (): {
     data: HourData[];
     dailyTotal: number;
@@ -485,129 +493,162 @@ const EpinetTableView = ({
           </div>
         </div>
 
-        <Accordion.Root multiple className="w-full">
-          {dayData.map((item, index) => (
-            <Accordion.Item
-              key={item.type === 'active' ? item.hourKey : `empty-${index}`}
-              value={item.type === 'active' ? item.hourKey : `empty-${index}`}
-              className="border-b border-gray-100 last:border-b-0"
-            >
-              <Accordion.ItemTrigger className="flex w-full cursor-pointer items-center justify-between p-3 text-left transition-colors duration-200 hover:bg-gray-100">
-                {item.type === 'active' ? (
-                  <div className="flex flex-grow items-center justify-between space-x-3">
-                    <div className="flex flex-grow items-center space-x-3">
-                      <span className="text-sm font-bold text-gray-700">
-                        {item.humanReadableTime}
-                      </span>
-                      <span className="text-xs text-gray-600">
-                        {item.hourlyTotal} event
-                        {item.hourlyTotal !== 1 ? 's' : ''} /{' '}
-                        {item.hourlyVisitors} visitor
-                        {item.hourlyVisitors !== 1 ? 's' : ''}
-                      </span>
-                      <div className="relative h-2 w-full max-w-48 rounded bg-gray-200">
-                        <div
-                          className="absolute left-0 top-0 h-2 rounded bg-cyan-600"
-                          style={{
-                            width: `${Math.max(item.relativeToMax * 100, 5)}%`,
-                          }}
-                          title={`${item.hourlyTotal} events (${(
-                            item.relativeToMax * 100
-                          ).toFixed(1)}% of busiest hour)`}
-                        />
+        <Accordion.Root
+          multiple
+          className="w-full"
+          value={openAccordionValues}
+          onValueChange={({ value }) =>
+            setOpenAccordionValues(value.filter((v) => !v.startsWith('empty-')))
+          }
+        >
+          {dayData.map((item, index) => {
+            const itemValue =
+              item.type === 'active' ? item.hourKey : `empty-${index}`;
+            const isExpandable = item.type === 'active';
+            const isOpen = openAccordionValues.includes(itemValue);
+            return (
+              <Accordion.Item
+                key={item.type === 'active' ? item.hourKey : `empty-${index}`}
+                value={itemValue}
+                disabled={!isExpandable}
+                className="border-b border-gray-100 last:border-b-0"
+              >
+                <Accordion.ItemTrigger
+                  className={classNames(
+                    'flex w-full items-center justify-between p-3 text-left transition-colors duration-200',
+                    isExpandable
+                      ? 'cursor-pointer hover:bg-gray-100'
+                      : 'cursor-default hover:bg-transparent'
+                  )}
+                >
+                  {item.type === 'active' ? (
+                    <div className="flex flex-grow items-center justify-between space-x-3">
+                      <div className="flex flex-grow items-center space-x-3">
+                        <span className="text-sm font-bold text-gray-700">
+                          {item.humanReadableTime}
+                        </span>
+                        <span className="text-xs text-gray-600">
+                          {item.hourlyTotal} event
+                          {item.hourlyTotal !== 1 ? 's' : ''} /{' '}
+                          {item.hourlyVisitors} visitor
+                          {item.hourlyVisitors !== 1 ? 's' : ''}
+                        </span>
+                        <div className="relative h-2 w-full max-w-48 rounded bg-gray-200">
+                          <div
+                            className="absolute left-0 top-0 h-2 rounded bg-cyan-600"
+                            style={{
+                              width: `${Math.max(item.relativeToMax * 100, 5)}%`,
+                            }}
+                            title={`${item.hourlyTotal} events (${(
+                              item.relativeToMax * 100
+                            ).toFixed(1)}% of busiest hour)`}
+                          />
+                        </div>
                       </div>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <div
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          focusOnThisHour(item.hourKey);
-                        }}
-                        className="flex cursor-pointer items-center rounded-md bg-orange-100 px-2 py-1 text-xs font-bold text-orange-800 transition-colors duration-200 hover:bg-orange-200"
-                        role="button"
-                        tabIndex={0}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
+                      <div className="flex items-center space-x-2">
+                        <div
+                          onClick={(e) => {
                             e.stopPropagation();
                             focusOnThisHour(item.hourKey);
-                          }
-                        }}
-                      >
-                        <MagnifyingGlassIcon className="mr-1 h-3 w-3" />
-                        Journeys this Hour
+                          }}
+                          className="flex cursor-pointer items-center rounded-md bg-orange-100 px-2 py-1 text-xs font-bold text-orange-800 transition-colors duration-200 hover:bg-orange-200"
+                          role="button"
+                          tabIndex={0}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              focusOnThisHour(item.hourKey);
+                            }
+                          }}
+                        >
+                          <MagnifyingGlassIcon className="mr-1 h-3 w-3" />
+                          Journeys this Hour
+                        </div>
+                        <div className="flex items-center rounded-md bg-orange-100 px-2 py-1 text-xs font-bold text-orange-800">
+                          <Accordion.ItemIndicator>
+                            <ChevronDownIcon
+                              className={classNames(
+                                'h-3 w-3 transition-transform duration-200',
+                                isOpen && 'rotate-180'
+                              )}
+                            />
+                          </Accordion.ItemIndicator>
+                          <span
+                            className={classNames(
+                              'ml-1',
+                              isOpen ? 'hidden' : 'block'
+                            )}
+                          >
+                            Expand Details
+                          </span>
+                          <span
+                            className={classNames(
+                              'ml-1',
+                              isOpen ? 'block' : 'hidden'
+                            )}
+                          >
+                            Hide Details
+                          </span>
+                        </div>
                       </div>
-                      <div className="flex items-center rounded-md bg-orange-100 px-2 py-1 text-xs font-bold text-orange-800">
-                        <Accordion.ItemIndicator>
-                          <ChevronDownIcon className="h-3 w-3 transition-transform duration-200 data-[state=open]:rotate-180" />
-                        </Accordion.ItemIndicator>
-                        <span className="ml-1 data-[state=closed]:block data-[state=open]:hidden">
-                          Expand Details
+                    </div>
+                  ) : (
+                    <div className="flex flex-grow items-center">
+                      <div className="flex items-center">
+                        <span className="text-sm text-gray-700">
+                          {item.humanReadableDisplay}
                         </span>
-                        <span className="ml-1 data-[state=open]:block data-[state=closed]:hidden">
-                          Hide Details
+                        <span className="ml-2 text-xs italic text-gray-500">
+                          {item.isFuture ? 'The future awaits!' : 'No activity'}
                         </span>
                       </div>
                     </div>
-                  </div>
-                ) : (
-                  <div className="flex flex-grow items-center justify-between">
-                    <div className="flex items-center">
-                      <span className="text-sm text-gray-700">
-                        {item.humanReadableDisplay}
-                      </span>
-                      <span className="ml-2 text-xs italic text-gray-500">
-                        {item.isFuture ? 'The future awaits!' : 'No activity'}
-                      </span>
-                    </div>
-                    <Accordion.ItemIndicator>
-                      <ChevronDownIcon className="h-5 w-5 text-gray-500 transition-transform duration-200 data-[state=open]:rotate-180" />
-                    </Accordion.ItemIndicator>
-                  </div>
-                )}
-              </Accordion.ItemTrigger>
-
-              <Accordion.ItemContent className="p-4">
-                {item.type === 'active' && (
-                  <div className="space-y-4">
-                    {item.contentItems.map((content) => (
-                      <div
-                        key={`${item.hourKey}-${content.contentId}`}
-                        className="mb-3"
-                      >
-                        <div className="mb-1 flex items-center justify-between text-sm font-bold text-gray-700">
-                          <div className="flex items-center">
-                            {getContentIcon(content.contentType)}
-                            {content.title}
-                          </div>
-                          {content.visitorIds.length > 0 && (
-                            <div
-                              className="flex items-center text-xs text-gray-600"
-                              title={content.visitorIds.join(', ')}
-                            >
-                              <UserGroupIcon className="mr-1 h-3 w-3" />
-                              {content.visitorIds.length} unique visitor
-                              {content.visitorIds.length !== 1 ? 's' : ''}
-                            </div>
-                          )}
-                        </div>
-                        <div className="flex flex-wrap gap-2">
-                          {content.events.map((event, eventIdx) => (
-                            <div
-                              key={`${item.hourKey}-${content.contentId}-${event.verb}-${eventIdx}`}
-                              className="rounded-full bg-cyan-100 px-2 py-0.5 text-xs font-bold text-cyan-800"
-                            >
-                              {event.verb} [{event.count}]
+                  )}
+                </Accordion.ItemTrigger>
+
+                {isExpandable && (
+                  <Accordion.ItemContent className="p-4">
+                    <div className="space-y-4">
+                      {item.contentItems.map((content) => (
+                        <div
+                          key={`${item.hourKey}-${content.contentId}`}
+                          className="mb-3"
+                        >
+                          <div className="mb-1 flex items-center justify-between text-sm font-bold text-gray-700">
+                            <div className="flex items-center">
+                              {getContentIcon(content.contentType)}
+                              {content.title}
                             </div>
-                          ))}
+                            {content.visitorIds.length > 0 && (
+                              <div
+                                className="flex items-center text-xs text-gray-600"
+                                title={content.visitorIds.join(', ')}
+                              >
+                                <UserGroupIcon className="mr-1 h-3 w-3" />
+                                {content.visitorIds.length} unique visitor
+                                {content.visitorIds.length !== 1 ? 's' : ''}
+                              </div>
+                            )}
+                          </div>
+                          <div className="flex flex-wrap gap-2">
+                            {content.events.map((event, eventIdx) => (
+                              <div
+                                key={`${item.hourKey}-${content.contentId}-${event.verb}-${eventIdx}`}
+                                className="rounded-full bg-cyan-100 px-2 py-0.5 text-xs font-bold text-cyan-800"
+                              >
+                                {event.verb} [{event.count}]
+                              </div>
+                            ))}
+                          </div>
                         </div>
-                      </div>
-                    ))}
-                  </div>
+                      ))}
+                    </div>
+                  </Accordion.ItemContent>
                 )}
-              </Accordion.ItemContent>
-            </Accordion.Item>
-          ))}
+              </Accordion.Item>
+            );
+          })}
 
           {dayData.length === 0 && (
             <div className="py-6 text-center text-sm text-gray-500">

package/templates/src/components/codehooks/EpinetWrapper.tsx

@@ -269,7 +269,10 @@ const EpinetWrapper = ({
     return (
       <div className="flex h-96 w-full items-center justify-center rounded bg-gray-100">
         <div className="text-center">
-          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-cyan-600 border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"></div>
+          <div
+            className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-cyan-600 border-r-transparent motion-reduce:animate-none"
+            style={{ verticalAlign: '-0.125em' }}
+          ></div>
           <p className="mt-4 text-sm text-gray-600">
             Discovering analytics configuration...
           </p>

package/templates/src/components/codehooks/FeaturedArticleSetup.tsx

@@ -22,6 +22,13 @@ const comboboxItemStyles = `
   .combo-item[data-state="checked"] .check-indicator {
     display: flex;
   }
+  .combo-item[data-highlighted] {
+    background-color: #0891b2;
+    color: #fff;
+  }
+  .combo-item[data-highlighted] .check-indicator {
+    color: #fff;
+  }
 `;
 
 const FeaturedArticleSetup = ({
@@ -268,7 +275,7 @@ const FeaturedArticleSetup = ({
               <Combobox.Item
                 key={item.slug}
                 item={item}
-                className="combo-item relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+                className="combo-item relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900"
               >
                 <span className="block truncate">{item.title}</span>
                 <span className="check-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">

package/templates/src/components/codehooks/ProductCardSetup.tsx

@@ -7,6 +7,13 @@ import { fullContentMapStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import type { PaneNode } from '@/types/compositorTypes';
 
+const productCardComboItemHighlightStyles = `
+  .product-card-combo-item[data-highlighted] {
+    background-color: #0891b2;
+    color: #fff;
+  }
+`;
+
 interface ProductCardSetupProps {
   nodeId: string;
   params: Record<string, any> | null;
@@ -118,6 +125,7 @@ export const ProductCardSetup = (props: ProductCardSetupProps) => {
             <Combobox.Label className="text-sm font-bold text-gray-700">
               Find a product
             </Combobox.Label>
+            <style>{productCardComboItemHighlightStyles}</style>
             <Combobox.Control>
               <Combobox.Input
                 className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
@@ -131,7 +139,7 @@ export const ProductCardSetup = (props: ProductCardSetupProps) => {
                     <Combobox.Item
                       key={item.value}
                       item={item}
-                      className="relative cursor-pointer select-none px-4 py-2 text-gray-900 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+                      className="product-card-combo-item relative cursor-pointer select-none px-4 py-2 text-gray-900"
                     >
                       <Combobox.ItemText>{item.label}</Combobox.ItemText>
                     </Combobox.Item>

package/templates/src/components/codehooks/ProductGridSetup.tsx

@@ -35,6 +35,13 @@ const modes = [
   },
 ];
 
+const productGridComboItemHighlightStyles = `
+  .product-grid-combo-item[data-highlighted] {
+    background-color: #0891b2;
+    color: #fff;
+  }
+`;
+
 export const ProductGridSetup = (props: ProductGridSetupProps) => {
   const { nodeId, params } = props;
   const ctx = getCtx();
@@ -235,6 +242,7 @@ export const ProductGridSetup = (props: ProductGridSetupProps) => {
                 <Combobox.Label className="text-sm font-bold text-gray-700">
                   Find products to include
                 </Combobox.Label>
+                <style>{productGridComboItemHighlightStyles}</style>
                 <Combobox.Control>
                   <Combobox.Input
                     className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
@@ -248,7 +256,7 @@ export const ProductGridSetup = (props: ProductGridSetupProps) => {
                         <Combobox.Item
                           key={item.value}
                           item={item}
-                          className="relative flex cursor-pointer select-none items-center px-4 py-2 text-gray-900 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+                          className="product-grid-combo-item relative flex cursor-pointer select-none items-center px-4 py-2 text-gray-900"
                         >
                           <Combobox.ItemText>{item.label}</Combobox.ItemText>
                           <Combobox.ItemIndicator className="ml-auto">

package/templates/src/components/compositor/nodes/BgPaneWrapper.tsx

@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react';
 import { getCtx } from '@/stores/nodes';
 import { viewportKeyStore } from '@/stores/storykeep';
 import {
@@ -15,7 +16,7 @@ export const BgPaneWrapper = (props: NodeProps) => {
 
   const viewport = viewportKeyStore.get().value;
 
-  const handleClick = (e: React.MouseEvent) => {
+  const handleClick = (e: MouseEvent) => {
     getCtx(props).setClickedNodeId(props.nodeId, true);
     e.stopPropagation();
   };

package/templates/src/components/compositor/nodes/GhostInsertBlock.tsx

@@ -85,7 +85,7 @@ export const GhostInsertBlock = memo((props: GhostInsertBlockProps) => {
     setShowInsertOptions(false);
   };
 
-  const handleClose = (e: React.MouseEvent) => {
+  const handleClose = (e: MouseEvent) => {
     e.stopPropagation();
     getCtx(props).setPanelMode('', '', '');
     setShowInsertOptions(false);

package/templates/src/components/edit/ToolBar.tsx

@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react';
 import { useStore } from '@nanostores/react';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import { getCtx } from '@/stores/nodes';
@@ -20,7 +21,7 @@ const AddElementsPanel = ({
     ctx.notifyNode('root');
   };
 
-  const handleMouseDown = (e: React.MouseEvent, mode: ToolAddMode) => {
+  const handleMouseDown = (e: MouseEvent, mode: ToolAddMode) => {
     e.preventDefault();
     startToolDrag('insert', mode, e.clientX, e.clientY);
     initToolDragListeners();

package/templates/src/components/edit/context/ContextPaneConfig_slug.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, type ChangeEvent } from 'react';
 import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTriangleIcon';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { getCtx } from '@/stores/nodes';
@@ -42,7 +42,7 @@ const PaneSlugPanel = ({ nodeId, setMode }: PaneSlugPanelProps) => {
     //.replace(/^-+|-+$/g, '');
   };
 
-  const handleSlugChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSlugChange = (e: ChangeEvent<HTMLInputElement>) => {
     const newSlug = validateSlug(e.target.value);
     if (newSlug.length <= 75) {
       // Prevent more than 75 chars

package/templates/src/components/edit/pane/AddPanePanel_codehook.tsx

@@ -103,6 +103,19 @@ const AddPaneCodeHookPanel = ({
       parentId: '',
       codeHookTarget: selected,
       isContextPane: isContextPane,
+      ...(selected === 'shopify-product-grid' ||
+      selected === 'shopify-service-list'
+        ? {
+            codeHookPayload: {
+              options: JSON.stringify({
+                category: 'product|service',
+                group: '',
+                title: '',
+                bgColor: '#f9f9f9',
+              }),
+            },
+          }
+        : {}),
     };
     const targetId =
       isStoryFragment || isContextPane

package/templates/src/components/edit/pane/AddPanePanel_newCustomCopy.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, type ChangeEvent } from 'react';
 
 interface AddPaneNewCustomCopyProps {
   value: string;
@@ -11,7 +11,7 @@ export const AddPaneNewCustomCopy = ({
 }: AddPaneNewCustomCopyProps) => {
   const [localValue, setLocalValue] = useState(initialValue);
 
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setLocalValue(e.target.value);
   };
 

package/templates/src/components/edit/pane/ConfigPanePanel.tsx

@@ -302,7 +302,7 @@ const ConfigPanePanel = ({
           {/* Right Aligned Tools */}
           <div className="ml-auto flex items-center gap-2 px-2">
             {/* Delete & Reorder Tools */}
-            {!isTemplate && !isContextPane && !isHtmlAstPane && (
+            {!isTemplate && !isContextPane && (
               <div className="flex items-center gap-1 border-r border-gray-300 pr-2">
                 <button
                   onClick={handleMoveUp}

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

@@ -454,7 +454,7 @@ export default function SaveModal({
                         Keep Editing
                       </button>
                       <a
-                        href="/storykeep/content"
+                        href="/storykeep"
                         className={`rounded bg-black px-4 py-2 text-white transition-colors hover:bg-white hover:text-black`}
                       >
                         Dashboard

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

@@ -71,7 +71,12 @@ const IconSelector = ({
     () => createListCollection({ items: filteredIcons }),
     [filteredIcons]
   );
-  const iconSelectorStyles = `.icon-item .icon-indicator { display: none; } .icon-item[data-state="checked"] .icon-indicator { display: flex; }`;
+  const iconSelectorStyles = `
+    .icon-item .icon-indicator { display: none; }
+    .icon-item[data-state="checked"] .icon-indicator { display: flex; }
+    .icon-item[data-highlighted] { background-color: #0891b2; color: #fff; }
+    .icon-item[data-highlighted] .icon-indicator { color: #fff; }
+  `;
   return (
     <div>
       <style>{iconSelectorStyles}</style>
@@ -100,12 +105,12 @@ const IconSelector = ({
                 <Combobox.Item
                   key={icon}
                   item={icon}
-                  className="icon-item relative cursor-pointer select-none py-2 pl-10 pr-4 text-gray-900 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+                  className="icon-item relative cursor-pointer select-none py-2 pl-10 pr-4 text-gray-900"
                 >
                   <Combobox.ItemText>
                     <i className={`bi bi-${icon} mr-2 text-lg`}></i> {icon}
                   </Combobox.ItemText>
-                  <Combobox.ItemIndicator className="icon-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600 data-[highlighted]:text-white">
+                  <Combobox.ItemIndicator className="icon-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
                     <CheckIcon className="h-5 w-5" />
                   </Combobox.ItemIndicator>
                 </Combobox.Item>

package/templates/src/components/form/DateTimeInput.tsx

@@ -40,6 +40,12 @@ const ampmOptions = [
   { value: 'PM', label: 'PM' },
 ];
 
+const datetimeSelectItemHighlightStyles = `
+  .datetime-select-item[data-highlighted] {
+    background-color: #eff6ff;
+  }
+`;
+
 const DateTimeInput = ({
   value,
   onChange,
@@ -450,6 +456,7 @@ const DateTimeInput = ({
       {/* Time Picker Section (only show if withTime is true and not date-only) */}
       {withTime && displayFormat !== 'date' && (
         <div className="space-y-2">
+          <style>{datetimeSelectItemHighlightStyles}</style>
           <div className="text-xs font-bold text-gray-600">
             Time (Local Timezone)
           </div>
@@ -489,7 +496,7 @@ const DateTimeInput = ({
                         <Select.Item
                           key={option.value}
                           item={option}
-                          className="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50 data-[highlighted]:bg-blue-50"
+                          className="datetime-select-item flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50"
                         >
                           <Select.ItemText>{option.label}</Select.ItemText>
                           <Select.ItemIndicator>
@@ -540,7 +547,7 @@ const DateTimeInput = ({
                         <Select.Item
                           key={option.value}
                           item={option}
-                          className="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50 data-[highlighted]:bg-blue-50"
+                          className="datetime-select-item flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50"
                         >
                           <Select.ItemText>{option.label}</Select.ItemText>
                           <Select.ItemIndicator>
@@ -589,7 +596,7 @@ const DateTimeInput = ({
                         <Select.Item
                           key={option.value}
                           item={option}
-                          className="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50 data-[highlighted]:bg-blue-50"
+                          className="datetime-select-item flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50"
                         >
                           <Select.ItemText>{option.label}</Select.ItemText>
                           <Select.ItemIndicator>

package/templates/src/components/form/FileUpload.tsx

@@ -1,4 +1,10 @@
-import { useRef, useState, useId } from 'react';
+import {
+  useRef,
+  useState,
+  useId,
+  type ChangeEvent,
+  type DragEvent,
+} from 'react';
 import { classNames } from '@/utils/helpers';
 import {
   validateFile,
@@ -151,14 +157,14 @@ const FileUpload = ({
     }
   };
 
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
       processFile(file);
     }
   };
 
-  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     setDragOver(false);
 
@@ -170,14 +176,14 @@ const FileUpload = ({
     }
   };
 
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     if (!disabled) {
       setDragOver(true);
     }
   };
 
-  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+  const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     setDragOver(false);
   };