hey-pharmacist-ecommerce 1.1.17 → 1.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.17",
+  "version": "1.1.19",
   "description": "Production-ready, multi-tenant e‑commerce UI + API adapter for Next.js with auth, carts, checkout, orders, theming, and pharmacist-focused UX.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -31,17 +31,17 @@
     "zustand": "^4.4.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
     "@types/node": "^20.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "autoprefixer": "^10.4.0",
     "eslint": "^8.0.0",
     "eslint-config-next": "^14.0.0",
     "next": "^16.0.10",
     "postcss": "^8.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^4.1.18",
     "tsup": "^8.0.0",
     "typescript": "^5.3.0"
   },

package/src/components/AccountOrdersTab.tsx

@@ -100,7 +100,7 @@ export function AccountOrdersTab() {
 
                                     return (
                                         <div key={item.productVariantId || index} className="flex items-center gap-3">
-                                            <div className="relative w-12 h-12 rounded-lg bg-slate-100 flex-shrink-0 overflow-hidden">
+                                            <div className="relative w-12 h-12 rounded-lg bg-slate-100 shrink-0 overflow-hidden">
                                                 <Image
                                                     src={item?.productVariantData?.productMedia?.[0]?.file || '/placeholder-product.jpg'}
                                                     alt={item?.productVariantData?.name || 'Product image'}

package/src/components/AccountSettingsTab.tsx

@@ -31,7 +31,7 @@ export function AccountSettingsTab() {
                             type="checkbox"
                             checked={emailNotifications}
                             onChange={(e) => setEmailNotifications(e.target.checked)}
-                            className="h-4 w-4 rounded border-primary-300 text-secondary focus:ring-primary-500"
+                            className="h-4 w-4 rounded-sm border-primary-300 text-secondary focus:ring-primary-500"
                         />
                     </label>
                     <label className="flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
@@ -43,7 +43,7 @@ export function AccountSettingsTab() {
                             type="checkbox"
                             checked={orderUpdates}
                             onChange={(e) => setOrderUpdates(e.target.checked)}
-                            className="h-4 w-4 rounded border-primary-300 text-secondary focus:ring-primary-500"
+                            className="h-4 w-4 rounded-sm border-primary-300 text-secondary focus:ring-primary-500"
                         />
                     </label>
                     <label className="flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
@@ -55,7 +55,7 @@ export function AccountSettingsTab() {
                             type="checkbox"
                             checked={promotionalEmails}
                             onChange={(e) => setPromotionalEmails(e.target.checked)}
-                            className="h-4 w-4 rounded border-primary-300 text-secondary focus:ring-primary-500"
+                            className="h-4 w-4 rounded-sm border-primary-300 text-secondary focus:ring-primary-500"
                         />
                     </label>
                 </div>
@@ -74,7 +74,7 @@ export function AccountSettingsTab() {
                             <p className="text-xs text-muted">Update your account password</p>
                         </div>
                         <Button
-                            variant="outline"
+                            variant="outline-solid"
                             size="sm"
                             onClick={() => router.push(buildPath('/account/change-password'))}
                         >
@@ -86,7 +86,7 @@ export function AccountSettingsTab() {
                             <p className="text-sm font-medium text-secondary">Two-Factor Authentication</p>
                             <p className="text-xs text-muted">Add an extra layer of security</p>
                         </div>
-                        <Button variant="outline" size="sm">
+                        <Button variant="outline-solid" size="sm">
                             Enable
                         </Button>
                     </div> */}
@@ -96,7 +96,7 @@ export function AccountSettingsTab() {
                             <p className="text-xs text-red-600">Permanently delete your account and data</p>
                         </div>
                         <Button
-                            variant="outline"
+                            variant="outline-solid"
                             size="sm"
                             className="border-red-200 text-red-600 hover:bg-red-50"
                             onClick={() => {

package/src/components/FilterChips.tsx

@@ -94,8 +94,8 @@ export function FilterChips({
               className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-all whitespace-nowrap ${
                 isSelected
                   ? isPrimary
-                    ? 'border-primary-500 bg-primary-500 text-white shadow-sm'
-                    : 'border-secondary-500 bg-secondary-500 text-white shadow-sm'
+                    ? 'border-primary-500 bg-primary-500 text-white shadow-xs'
+                    : 'border-secondary-500 bg-secondary-500 text-white shadow-xs'
                   : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'
               }`}
             >

package/src/components/Header.tsx

@@ -45,7 +45,7 @@ export function Header() {
   ];
 
   return (
-    <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-xl border-b border-gray-200 shadow-sm">
+    <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-xl border-b border-gray-200 shadow-xs">
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-20">
           {/* Logo */}
@@ -106,7 +106,7 @@ export function Header() {
                           }
                         }}
                         placeholder="Search products..."
-                        className="w-full outline-none text-gray-700"
+                        className="w-full outline-hidden text-gray-700"
                         autoFocus
                       />
                       {searchQuery && (

package/src/components/Notification.tsx

@@ -81,7 +81,7 @@ export function Notification({ notification, onDismiss }: NotificationProps) {
             className={`relative bg-white rounded-2xl border-2 ${config.borderColor} shadow-xl overflow-hidden min-w-[320px] max-w-[420px]`}
         >
             {/* Gradient accent bar */}
-            <div className={`h-1 bg-gradient-to-r ${config.gradient}`} />
+            <div className={`h-1 bg-linear-to-r ${config.gradient}`} />
 
             <div className="p-4 flex items-start gap-3">
                 {/* Icon */}
@@ -119,7 +119,7 @@ export function Notification({ notification, onDismiss }: NotificationProps) {
             {/* Progress bar */}
             <div className="h-1 bg-gray-100">
                 <motion.div
-                    className={`h-full bg-gradient-to-r ${config.gradient}`}
+                    className={`h-full bg-linear-to-r ${config.gradient}`}
                     style={{ width: `${progress}%` }}
                     transition={{ duration: 0.016, ease: 'linear' }}
                 />
@@ -135,7 +135,7 @@ interface NotificationContainerProps {
 
 export function NotificationContainer({ notifications, onDismiss }: NotificationContainerProps) {
     return (
-        <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-3 pointer-events-none">
+        <div className="fixed top-4 right-4 z-9999 flex flex-col gap-3 pointer-events-none">
             <AnimatePresence mode="popLayout">
                 {notifications.map((notification) => (
                     <div key={notification.id} className="pointer-events-auto">

package/src/components/OrderCard.tsx

@@ -23,7 +23,7 @@ export function OrderCard({ order }: OrderCardProps) {
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
-      className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm hover:shadow-md transition-shadow"
+      className="rounded-lg border border-slate-200 bg-white p-4 shadow-xs hover:shadow-md transition-shadow"
     >
       {/* Header - Compact */}
       <div className="flex items-center justify-between mb-4 pb-4 border-b border-gray-200">
@@ -53,7 +53,7 @@ export function OrderCard({ order }: OrderCardProps) {
 
             return (
               <div key={item.productVariantId || item._id} className="flex items-center gap-2 text-sm">
-                <div className="relative w-12 h-12 rounded bg-gray-100 flex-shrink-0 overflow-hidden">
+                <div className="relative w-12 h-12 rounded-sm bg-gray-100 shrink-0 overflow-hidden">
                   <Image
                     src={item?.productVariantData?.productMedia?.[0]?.file || '/placeholder-product.jpg'}
                     alt={item?.productVariantData?.name || 'Product image'}

package/src/components/ProductCard.tsx

@@ -141,6 +141,26 @@ export function ProductCard({
     return selectedVariant?.name || product.name;
   }, [selectedVariant, product.name]);
 
+  const displayFinalPrice = useMemo(() => {
+    return selectedVariant?.finalPrice ?? product.finalPrice;
+  }, [selectedVariant, product.finalPrice]);
+
+  const displayPriceBeforeDiscount = useMemo(() => {
+    return selectedVariant?.retailPrice ?? product.priceBeforeDiscount;
+  }, [selectedVariant, product.priceBeforeDiscount]);
+
+  const displayIsDiscounted = useMemo(() => {
+    return selectedVariant ? selectedVariant.isDiscounted : product.isDiscounted;
+  }, [selectedVariant, product.isDiscounted]);
+
+  const displayDiscountAmount = useMemo(() => {
+    return selectedVariant ? selectedVariant.discountAmount : product.discountAmount;
+  }, [selectedVariant, product.discountAmount]);
+
+  const displayInventoryCount = useMemo(() => {
+    return selectedVariant ? selectedVariant.inventoryCount : product.inventoryCount;
+  }, [selectedVariant, product.inventoryCount]);
+
   const imageSource = useMemo(() => {
     const src = selectedVariantImage || product.productMedia?.[0]?.file || '/placeholder-product.jpg';
     return {
@@ -171,7 +191,7 @@ export function ProductCard({
       >
         <div
           onClick={handleCardClick}
-          className="relative aspect-square overflow-hidden bg-gray-50 cursor-pointer flex-shrink-0"
+          className="relative aspect-square overflow-hidden bg-gray-50 cursor-pointer shrink-0"
         >
           <Image
             src={imageSource.src}
@@ -189,13 +209,13 @@ export function ProductCard({
               e.stopPropagation();
               setShowQuickView(true);
             }}
-            className="absolute top-2 left-2 p-2 rounded-full bg-white/90 backdrop-blur-sm hover:bg-white shadow-md opacity-0 group-hover:opacity-100 transition-all"
+            className="absolute top-2 left-2 p-2 rounded-full bg-white/90 backdrop-blur-xs hover:bg-white shadow-md opacity-0 group-hover:opacity-100 transition-all"
           >
             <Eye className="size-4 text-[#2B4B7C]" />
           </button>
 
-          {product.inventoryCount === 0 && (
-            <div className="absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center">
+          {displayInventoryCount === 0 && (
+            <div className="absolute inset-0 bg-black/50 backdrop-blur-xs flex items-center justify-center">
               <div className="bg-white rounded-full px-4 py-2">
                 <span className="font-['Poppins',sans-serif] font-bold text-[11px] text-[#2B4B7C] uppercase">
                   Out of Stock
@@ -210,13 +230,13 @@ export function ProductCard({
           <div className="p-0 flex-1 flex flex-col">
             {/* ALL Status Badges */}
             <div className="flex items-center gap-1 mb-2 flex-wrap">
-              {product.isDiscounted && (
+              {displayIsDiscounted && (
                 <span className="bg-[#E67E50] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
-                  <span className="font-['Poppins',sans-serif] font-bold text-[8px] uppercase">-{product.discountAmount}%</span>
+                  <span className="font-['Poppins',sans-serif] font-bold text-[8px] uppercase">-{displayDiscountAmount}%</span>
                 </span>
               )}
               {/* {product.dealOfWeek && (
-              <span className="bg-gradient-to-r from-[#E67E50] to-[#d66f45] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
+              <span className="bg-linear-to-r from-[#E67E50] to-[#d66f45] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
                 <TrendingUp className="size-2.5" />
                 <span className="font-['Poppins',sans-serif] font-semibold text-[8px] uppercase">Deal</span>
               </span>
@@ -264,11 +284,11 @@ export function ProductCard({
             {/* Price */}
             <div className="flex items-center gap-1.5 mb-3">
               <span className="font-['Poppins',sans-serif] font-bold text-md text-primary-600">
-                ${product.finalPrice.toFixed(2)}
+                ${displayFinalPrice.toFixed(2)}
               </span>
-              {product.isDiscounted && (
+              {displayIsDiscounted && (
                 <span className="font-['Poppins',sans-serif] text-sm text-[#676c80] line-through">
-                  ${formatPrice(product.priceBeforeDiscount)}
+                  ${formatPrice(displayPriceBeforeDiscount)}
                 </span>
               )}
             </div>
@@ -331,11 +351,11 @@ export function ProductCard({
                 console.error('Failed to add to cart', error);
               }
             }}
-            disabled={isAddingToCart || (variantImages.length > 0 && !selectedVariantId)}
+            disabled={isAddingToCart || (variantImages.length > 0 && !selectedVariantId) || displayInventoryCount === 0}
             className="w-full font-['Poppins',sans-serif] font-medium text-[11px] px-3 py-2 rounded-full bg-[#5B9BD5] text-white hover:bg-[#4a8ac4] hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <ShoppingCart className="h-4 w-4" />
-            {selectedVariant?.inventoryCount === 0 ? 'Out of Stock' : 'Add to Cart'}
+            {displayInventoryCount === 0 ? 'Out of Stock' : 'Add to Cart'}
           </button>
         </div>
 

package/src/components/QuickViewModal.tsx

@@ -29,7 +29,11 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
   };
   const selectedVariant = product.productVariants[selectedVariantIndex];
   const selectedSize = selectedVariant.productMedia[selectedSizeIndex];
-  const displayPrice = product.finalPrice;
+  const displayPrice = selectedVariant.finalPrice;
+  const displayOriginalPrice = selectedVariant.retailPrice;
+  const isDiscounted = selectedVariant.isDiscounted;
+  const discountAmount = selectedVariant.discountAmount;
+  const displayName = selectedVariant.name || product.name;
 
   const handleAddToCart = async () => {
     if (!product || !selectedVariant) return;
@@ -59,7 +63,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
 
   return (
     <div 
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-xs"
       onClick={onClose}
     >
       <div 
@@ -74,7 +78,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                 {product.brand} • {product.parentCategories[0].name}
               </p>
               <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1px]">
-                {product.name}
+                {displayName}
               </h2>
               
               {/* Rating */}
@@ -107,7 +111,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             {/* Product Image */}
             <div className="space-y-4">
-              <div className="relative aspect-[3/4] rounded-[24px] overflow-hidden bg-gray-50">
+              <div className="relative aspect-3/4 rounded-[24px] overflow-hidden bg-gray-50">
                 <img
                   src={selectedVariant.productMedia[selectedImageIndex]?.file || selectedVariant.productMedia[0]?.file}
                   alt={product.name}
@@ -115,10 +119,10 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                 />
                 {/* Badges */}
                 <div className="absolute top-4 left-4 flex flex-col gap-2">
-                  {product.finalPrice && (
+                  {isDiscounted && (
                     <div className="bg-accent text-white rounded-full px-3 py-1.5">
                       <span className="font-['Poppins',sans-serif] font-bold text-[11px] uppercase">
-                        -{product.discountAmount}%
+                        -{discountAmount}%
                       </span>
                     </div>
                   )}
@@ -159,9 +163,9 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                 <span className="font-['Poppins',sans-serif] font-bold text-[32px] text-accent">
                   ${displayPrice.toFixed(2)}
                 </span>
-                {product.isDiscounted && (
+                {isDiscounted && (
                   <span className="font-['Poppins',sans-serif] text-[20px] text-muted line-through">
-                    ${product.finalPrice.toFixed(2)}
+                    ${displayOriginalPrice.toFixed(2)}
                   </span>
                 )}
               </div>
@@ -173,7 +177,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                     Out of Stock
                   </span>
                 ) : selectedVariant.inventoryCount <= 10 ? (
-                  <span className="font-['Poppins',sans-serif] text-[12px] text-orange-500 font-medium flex items-center gap-1">
+                  <span className="font-['Poppins',sans-serif] text-[12px] text-primary font-medium flex items-center gap-1">
                     <Package className="size-3" />
                     Only {selectedVariant.inventoryCount} left in stock
                   </span>

package/src/components/ui/Button.tsx

@@ -8,7 +8,7 @@ const MotionDiv = dynamic(() => import('framer-motion').then((mod) => mod.motion
 });
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  variant?: 'primary' | 'secondary'| 'ghost' | 'outline-solid';
   size?: 'sm' | 'md' | 'lg';
   isLoading?: boolean;
   children: React.ReactNode;
@@ -23,12 +23,12 @@ export function Button({
   children,
   ...props
 }: ButtonProps) {
-  const baseStyles = 'font-medium rounded-full transition-all duration-200 inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500';
+  const baseStyles = 'font-medium rounded-full transition-all duration-200 inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500';
   
   const variants = {
     primary: 'bg-primary-600 text-white hover:bg-primary-700 shadow-lg shadow-primary-500/30 hover:shadow-xl hover:shadow-primary-500/40',
     secondary: 'bg-secondary-600 text-white hover:bg-secondary-700 shadow-lg shadow-secondary-500/30 hover:shadow-xl hover:shadow-secondary-500/40',
-    outline: 'border-2 border-primary-600 text-primary-600 hover:bg-primary-50',
+    'outline-solid': 'border-2 border-primary-600 text-primary-600 hover:bg-primary-50',
     ghost: 'text-gray-700 hover:bg-gray-100',
   };
   

package/src/components/ui/Card.tsx

@@ -8,7 +8,7 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 export function Card({ className = '', ...props }: CardProps) {
   return (
     <div
-      className={`rounded-lg border bg-white shadow-sm ${className}`}
+      className={`rounded-lg border bg-white shadow-xs ${className}`}
       {...props}
     />
   );

package/src/components/ui/Input.tsx

@@ -23,7 +23,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
               ? 'border-red-500 focus:border-red-600 focus:ring-red-500/20' 
               : 'border-gray-200 focus:border-primary-500 focus:ring-primary-500/20'
             }
-            focus:outline-none focus:ring-4
+            focus:outline-hidden focus:ring-4
             placeholder:text-gray-400
             disabled:bg-gray-50 disabled:cursor-not-allowed
             ${className}

package/src/components/ui/Modal.tsx

@@ -43,7 +43,7 @@ export function Modal({ isOpen, onClose, title, children, size = 'md' }: ModalPr
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             onClick={onClose}
-            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
+            className="fixed inset-0 bg-black/50 backdrop-blur-xs z-50"
           />
           
           {/* Modal */}

package/src/components/ui/Skeleton.tsx

@@ -6,13 +6,13 @@ interface SkeletonProps {
 
 export function Skeleton({ className = '' }: SkeletonProps) {
   return (
-    <div className={`animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%] rounded ${className}`} />
+    <div className={`animate-pulse bg-linear-to-r from-gray-200 via-gray-300 to-gray-200 bg-size-[200%_100%] rounded-sm ${className}`} />
   );
 }
 
 export function ProductCardSkeleton() {
   return (
-    <div className="bg-white rounded-2xl overflow-hidden shadow-sm">
+    <div className="bg-white rounded-2xl overflow-hidden shadow-xs">
       <Skeleton className="h-64 w-full" />
       <div className="p-4 space-y-3">
         <Skeleton className="h-6 w-3/4" />
@@ -28,7 +28,7 @@ export function ProductCardSkeleton() {
 
 export function OrderCardSkeleton() {
   return (
-    <div className="bg-white rounded-2xl p-6 shadow-sm">
+    <div className="bg-white rounded-2xl p-6 shadow-xs">
       <div className="flex justify-between items-start mb-4">
         <div className="space-y-2 flex-1">
           <Skeleton className="h-6 w-32" />

package/src/screens/AddressesScreen.tsx

@@ -261,12 +261,12 @@ export function AddressesScreen() {
                       : 'border-red-200 bg-red-50 text-red-700'
                   }`}
                 >
-                  <span className="mt-[1px] text-base">{banner.type === 'success' ? '✔' : '!'}</span>
+                  <span className="mt-px text-base">{banner.type === 'success' ? '✔' : '!'}</span>
                   <span>{banner.message}</span>
                 </div>
               )}
               <Button
-                variant="outline"
+                variant="outline-solid"
                 size="md"
                 className="border-slate-300 text-slate-800 hover:bg-white"
                 onClick={openCreateModal}
@@ -310,7 +310,7 @@ export function AddressesScreen() {
               {error.message}
             </div>
           ) : addresses.length === 0 ? (
-            <div className="rounded-3xl border border-slate-100 bg-white p-12 shadow-sm">
+            <div className="rounded-3xl border border-slate-100 bg-white p-12 shadow-xs">
               <EmptyState
                 icon={MapPin}
                 title="No addresses yet"
@@ -328,7 +328,7 @@ export function AddressesScreen() {
                     key={address.id}
                     initial={{ opacity: 0, y: 24 }}
                     animate={{ opacity: 1, y: 0 }}
-                    className="group relative flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:border-primary-200 hover:shadow-lg"
+                    className="group relative flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-6 shadow-xs transition hover:-translate-y-1 hover:border-primary-200 hover:shadow-lg"
                   >
                     {address.isDefault && (
                       <span className="absolute right-6 top-6 inline-flex items-center gap-2 rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">
@@ -463,7 +463,7 @@ export function AddressesScreen() {
               <span className="text-sm font-semibold text-slate-700">Address type</span>
               <select
                 {...register('addressType')}
-                className="rounded-xl border border-slate-200 px-3 py-2 text-sm text-slate-700 focus:border-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
+                className="rounded-xl border border-slate-200 px-3 py-2 text-sm text-slate-700 focus:border-primary-400 focus:outline-hidden focus:ring-2 focus:ring-primary-500/20"
               >
                 <option value="Shipping">Shipping</option>
                 <option value="Billing">Billing</option>
@@ -475,13 +475,13 @@ export function AddressesScreen() {
               <input
                 type="checkbox"
                 {...register('isDefault')}
-                className="h-4 w-4 rounded border-primary-300 text-primary-600 focus:ring-primary-500"
+                className="h-4 w-4 rounded-sm border-primary-300 text-primary-600 focus:ring-primary-500"
               />
             </label>
           </div>
 
           <div className="flex items-center justify-end gap-3">
-            <Button type="button" variant="outline" onClick={closeModal}>
+            <Button type="button" variant="outline-solid" onClick={closeModal}>
               Cancel
             </Button>
             <Button type="submit" isLoading={isSubmitting}>

package/src/screens/CartScreen.tsx

@@ -68,15 +68,15 @@ export function CartScreen() {
 
                 <div className="mt-8 space-y-3 pt-6 border-t border-gray-200">
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-secondary flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-secondary shrink-0 mt-0.5" />
                     <span>Free shipping on all orders</span>
                   </div>
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-secondary flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-secondary shrink-0 mt-0.5" />
                     <span>Easy returns within 30 days</span>
                   </div>
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-secondary flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-secondary shrink-0 mt-0.5" />
                     <span>Secure checkout process</span>
                   </div>
                 </div>
@@ -150,7 +150,7 @@ export function CartScreen() {
               transition={{ delay: 0.1 }}
               className="space-y-6 lg:sticky lg:top-24 h-fit lg:col-span-1"
             >
-              <div className="bg-gradient-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24">
+              <div className="bg-linear-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24">
                 <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-6">Order Summary</h2>
 
                 <div className="space-y-4 mb-6">
@@ -167,7 +167,7 @@ export function CartScreen() {
                   <div className="border-t border-gray-200 pt-4 mt-4">
                     <div className="flex items-center justify-between">
                       <span className="text-lg font-bold text-secondary">Total</span>
-                      <span className="text-2xl font-bold text-orange-600">{formatPrice(total)}</span>
+                      <span className="text-2xl font-bold text-primary">{formatPrice(total)}</span>
                     </div>
                   </div>
                 </div>
@@ -192,17 +192,17 @@ export function CartScreen() {
 
                 <div className="mt-6 space-y-3 pt-6 border-t border-gray-200">
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-muted flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-muted shrink-0 mt-0.5" />
                     <span>Easy returns within 30 days</span>
                   </div>
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-muted flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-muted shrink-0 mt-0.5" />
                     <span>Secure checkout process</span>
                   </div>
                 </div>
               </div>
 
-              {/* <div className="rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm">
+              {/* <div className="rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-xs">
                 <p className="font-semibold uppercase tracking-[0.3em]">Need help?</p>
                 <p className="mt-2 leading-relaxed">
                   Chat with a pharmacist to optimize your regimen or discuss substitutions before you

package/src/screens/ChangePasswordScreen.tsx

@@ -134,7 +134,7 @@ export function ChangePasswordScreen() {
               </Button>
               <Button
                 type="button"
-                variant="outline"
+                variant="outline-solid"
                 size="lg"
                 className="border-slate-300 text-slate-800 hover:bg-slate-50"
                 onClick={() => router.push(buildPath('/account'))}

package/src/screens/CheckoutScreen.tsx

@@ -487,7 +487,7 @@ export function CheckoutScreen() {
                       <label className="block font-semibold">Select Address</label>
                       <Button
                         type="button"
-                        variant="outline"
+                        variant="outline-solid"
                         size="sm"
                         onClick={() => { setEditingAddress(null); setIsAddressModalOpen(true); }}
                       >
@@ -502,7 +502,7 @@ export function CheckoutScreen() {
                           <label
                             key={addr.id}
                             className={`group relative flex items-start gap-3 p-4 rounded-2xl border ${selectedAddressId === addr.id
-                              ? 'border-primary-500 bg-primary-50 shadow-sm'
+                              ? 'border-primary-500 bg-primary-50 shadow-xs'
                               : 'border-slate-200 bg-white'
                               } cursor-pointer hover:border-primary-300 transition-colors`}
                           >
@@ -587,7 +587,7 @@ export function CheckoutScreen() {
                   <div className="md:col-span-2">
                     <label className="block mb-2 font-semibold">Select Pickup Location</label>
                     <select
-                      className="w-full border rounded p-2"
+                      className="w-full border rounded-sm p-2"
                       value={selectedStoreAddressId || ''}
                       onChange={e => setSelectedStoreAddressId(e.target.value)}
                     >
@@ -647,7 +647,7 @@ export function CheckoutScreen() {
                           <div className="flex items-start justify-between">
                             <div className="flex items-start gap-4 flex-1">
                               {/* Provider Logo */}
-                              <div className="flex-shrink-0">
+                              <div className="shrink-0">
                                 <Image
                                   src={rate.providerImage75 || '/placeholder-product.jpg'}
                                   alt={rate.provider}
@@ -668,7 +668,7 @@ export function CheckoutScreen() {
                                     {rate.provider} {rate.servicelevel?.name}
                                   </h3>
                                   {isTest && (
-                                    <span className="px-2 py-1 text-xs font-medium bg-orange-100 text-orange-800 rounded-full">
+                                    <span className="px-2 py-1 text-xs font-medium bg-primary-100 text-primary-800 rounded-full">
                                       TEST
                                     </span>
                                   )}
@@ -854,10 +854,10 @@ export function CheckoutScreen() {
                         className={`
                           group relative flex w-full items-center justify-between rounded-xl border-2 p-3
                           transition-all duration-200 ease-out
-                          focus:outline-none f
+                          focus:outline-hidden f
                           ${active
                             ? `${pm.activeClass} shadow-md scale-[1.02]`
-                            : `${pm.className} border-gray-200 bg-white hover:shadow-sm hover:-translate-y-0.5`
+                            : `${pm.className} border-gray-200 bg-white hover:shadow-xs hover:-translate-y-0.5`
                           }
                         `}
                       >
@@ -884,7 +884,7 @@ export function CheckoutScreen() {
                         </div>
 
                         {active && (
-                          <div className="flex h-6 w-6 items-center justify-center rounded-full shadow-sm">
+                          <div className="flex h-6 w-6 items-center justify-center rounded-full shadow-xs">
                             <Check className="h-3.5 w-3.5 text-white" />
                           </div>
                         )}
@@ -912,7 +912,7 @@ export function CheckoutScreen() {
             className="space-y-10 lg:sticky lg:top-24 lg:col-span-1"
           >
             {/* Order Summary */}
-            <div className="bg-gradient-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24">
+            <div className="bg-linear-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24">
               <h2 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-6 text-2xl">Order Summary</h2>
 
 
@@ -974,7 +974,7 @@ export function CheckoutScreen() {
 
                 <div className="bg-white/80 rounded-xl p-4">
                   <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80] leading-[1.6]">
-                    <strong className="text-[#2B4B7C]">Payment:</strong> We'll contact you to arrange payment upon pickup or delivery. We accept cash, credit cards, and all major payment methods.
+                    <strong className="text-[#2B4B7C]">Payment:</strong> We&apos;ll contact you to arrange payment upon pickup or delivery. We accept cash, credit cards, and all major payment methods.
                   </p>
                 </div>
               </section>