@codesinger0/shared-components 1.0.50 → 1.0.52

package/dist/components/ContactUs.jsx

@@ -0,0 +1,333 @@
+import React, { useState } from 'react';
+
+const ContactUs = ({
+    title = "צרו קשר",
+    subtitle = "נשמח לשמוע מכם ולענות על כל שאלה",
+    agreeToTermsText = `אני מסכים/ה לתנאי השימוש ומדיניות הפרטיות של האתר,
+                                        ומאשר/ת קבלת עדכונים שיווקיים באימייל
+                                        (ניתן לבטל בכל עת).`,
+    submitContactMessage = () => { },
+    businessInfo = {},
+    className = ""
+}) => {
+    const [formData, setFormData] = useState({
+        name: '',
+        phone: '',
+        email: '',
+        message: '',
+        agreeToTerms: false
+    });
+
+    const [errors, setErrors] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [submitted, setSubmitted] = useState(false);
+    const { submitContactMessage } = useContactMessage();
+
+    // Handle input changes
+    const handleInputChange = (e) => {
+        const { name, value, type, checked } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: type === 'checkbox' ? checked : value
+        }));
+
+        // Clear error for this field when user starts typing
+        if (errors[name]) {
+            setErrors(prev => ({ ...prev, [name]: '' }));
+        }
+    };
+
+    // Validation functions
+    const validateEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+
+    const validatePhone = (phone) => {
+        const phoneRegex = /^[0-9\-\+\(\)\s]{10,}$/;
+        return phoneRegex.test(phone.replace(/\s/g, ''));
+    };
+
+    // Form validation
+    const validateForm = () => {
+        const newErrors = {};
+
+        if (!formData.name.trim()) {
+            newErrors.name = 'שם מלא הוא שדה חובה';
+        }
+
+        if (!formData.phone.trim()) {
+            newErrors.phone = 'מספר טלפון הוא שדה חובה';
+        } else if (!validatePhone(formData.phone)) {
+            newErrors.phone = 'מספר טלפון לא תקין';
+        }
+
+        if (!formData.email.trim()) {
+            newErrors.email = 'כתובת אימייל היא שדה חובה';
+        } else if (!validateEmail(formData.email)) {
+            newErrors.email = 'כתובת אימייל לא תקינה';
+        }
+
+        if (formData.message && formData.message.trim().length > 500) {
+            newErrors.message = 'ההודעה לא יכולה להיות ארוכה מ-500 תווים';
+        }
+
+        if (!formData.agreeToTerms) {
+            newErrors.agreeToTerms = 'יש לאשר את תנאי השימוש והפרטיות';
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = async () => {
+        if (!validateForm()) {
+            return;
+        }
+
+        setLoading(true);
+
+        try {
+            const result = await submitContactMessage({
+                name: formData.name,
+                email: formData.email,
+                phone: formData.phone,
+                message: formData.message || `צרו קשר מהאתר - שם: ${formData.name}, טלפון: ${formData.phone}, אימייל: ${formData.email}. ${formData.agreeToTerms ? 'הסכים לתנאי השימוש.' : ''}`
+            });
+
+            if (result) {
+                console.log('Contact message submitted successfully:', result);
+                setSubmitted(true);
+                // Reset form
+                setFormData({
+                    name: '',
+                    phone: '',
+                    email: '',
+                    message: '',
+                    agreeToTerms: false
+                });
+            } else {
+                setErrors({ submit: 'אירעה שגיאה בשליחת הטופס. אנא נסו שוב.' });
+            }
+
+        } catch (error) {
+            console.error('Submission error:', error);
+            setErrors({ submit: 'אירעה שגיאה בשליחת הטופס. אנא נסו שוב.' });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+
+    // Success message component
+    if (submitted) {
+        return (
+            <section className={`py-16 px-4 bg-main ${className}`} dir="rtl">
+                <div className="max-w-4xl mx-auto">
+                    <div className="glass-card p-8 text-center">
+                        <h3 className="title mb-4">תודה רבה!</h3>
+                        <p className="subtitle mb-6">
+                            הטופס נשלח בהצלחה. נחזור אליכם בהקדם האפשרי.
+                        </p>
+                        <button
+                            onClick={() => setSubmitted(false)}
+                            className="btn-secondary"
+                        >
+                            שלח הודעה נוספת
+                        </button>
+                    </div>
+                </div>
+            </section>
+        );
+    }
+
+    return (
+        <section className={`py-16 px-4 bg-main ${className}`} dir="rtl">
+            <div className="max-w-4xl mx-auto">
+                {/* Header */}
+                <div className="text-center mb-12">
+                    <h2 className="title mb-4">{title}</h2>
+                    <p className="subtitle text-gray-600">{subtitle}</p>
+                </div>
+
+                {/* Contact Form */}
+                <div className="glass-card p-8">
+                    <div className="space-y-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            {/* Name Field */}
+                            <div>
+                                <label htmlFor="name" className="block subtitle font-semibold mb-2">
+                                    שם מלא *
+                                </label>
+                                <input
+                                    type="text"
+                                    id="name"
+                                    name="name"
+                                    value={formData.name}
+                                    onChange={handleInputChange}
+                                    className={`w-full p-4 rounded-lg border-2 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 ${errors.name
+                                        ? 'border-red-500 bg-red-50'
+                                        : 'border-gray-300 hover:border-gray-400 focus:border-primary'
+                                        }`}
+                                    placeholder="הכניסו את שמכם המלא"
+                                    dir="rtl"
+                                />
+                                {errors.name && (
+                                    <p className="text-red-500 text-sm mt-2">{errors.name}</p>
+                                )}
+                            </div>
+
+                            {/* Phone Field */}
+                            <div>
+                                <label htmlFor="phone" className="block subtitle font-semibold mb-2">
+                                    מספר טלפון *
+                                </label>
+                                <input
+                                    type="tel"
+                                    id="phone"
+                                    name="phone"
+                                    value={formData.phone}
+                                    onChange={handleInputChange}
+                                    className={`w-full p-4 rounded-lg border-2 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 ${errors.phone
+                                        ? 'border-red-500 bg-red-50'
+                                        : 'border-gray-300 hover:border-gray-400 focus:border-primary'
+                                        }`}
+                                    placeholder="050-1234567"
+                                    dir="ltr"
+                                />
+                                {errors.phone && (
+                                    <p className="text-red-500 text-sm mt-2">{errors.phone}</p>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Email Field */}
+                        <div>
+                            <label htmlFor="email" className="block subtitle font-semibold mb-2">
+                                כתובת אימייל *
+                            </label>
+                            <input
+                                type="email"
+                                id="email"
+                                name="email"
+                                value={formData.email}
+                                onChange={handleInputChange}
+                                className={`w-full p-4 rounded-lg border-2 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 ${errors.email
+                                    ? 'border-red-500 bg-red-50'
+                                    : 'border-gray-300 hover:border-gray-400 focus:border-primary'
+                                    }`}
+                                placeholder="example@email.com"
+                                dir="ltr"
+                            />
+                            {errors.email && (
+                                <p className="text-red-500 text-sm mt-2">{errors.email}</p>
+                            )}
+                        </div>
+
+                        {/* Message Field */}
+                        <div>
+                            <label htmlFor="message" className="block subtitle font-semibold mb-2">
+                                הודעה (אופציונלי)
+                            </label>
+                            <textarea
+                                id="message"
+                                name="message"
+                                value={formData.message}
+                                onChange={handleInputChange}
+                                rows={4}
+                                maxLength={500}
+                                className={`w-full p-4 rounded-lg border-2 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-20 resize-vertical ${errors.message
+                                        ? 'border-red-500 bg-red-50'
+                                        : 'border-gray-300 hover:border-gray-400 focus:border-primary'
+                                    }`}
+                                placeholder="ספרו לנו מה אתם מחפשים, איך אנחנו יכולים לעזור לכם, או כל דבר אחר שתרצו לשתף איתנו..."
+                                dir="rtl"
+                            />
+                            <div className="flex justify-between items-center mt-1">
+                                {errors.message && (
+                                    <p className="text-red-500 text-sm">{errors.message}</p>
+                                )}
+                                <span className="text-xs text-gray-500 mr-auto">
+                                    {formData.message.length}/500 תווים
+                                </span>
+                            </div>
+                        </div>
+
+
+                        {/* Checkbox Agreement */}
+                        <div className="px-4 rounded-lg">
+                            <label className="flex items-start space-x-3 space-x-reverse cursor-pointer">
+                                <input
+                                    type="checkbox"
+                                    name="agreeToTerms"
+                                    checked={formData.agreeToTerms}
+                                    onChange={handleInputChange}
+                                    className="mt-1 w-5 h-5 text-primary border-2 border-gray-300 rounded focus:ring-primary focus:ring-2 focus:ring-opacity-20"
+                                />
+                                <div className="flex-1">
+                                    <span className="content-text leading-relaxed">
+                                        {agreeToTermsText}
+                                    </span>
+                                </div>
+                            </label>
+                            {errors.agreeToTerms && (
+                                <p className="text-red-500 text-sm mt-2">{errors.agreeToTerms}</p>
+                            )}
+                        </div>
+
+                        {/* Submit Error */}
+                        {errors.submit && (
+                            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+                                {errors.submit}
+                            </div>
+                        )}
+
+                        {/* Submit Button */}
+                        <div className="text-center pt-4">
+                            <button
+                                onClick={handleSubmit}
+                                disabled={loading}
+                                className={`btn-primary text-lg px-8 py-4 inline-flex items-center gap-3 transition-all duration-200 ${loading
+                                    ? 'opacity-50 cursor-not-allowed'
+                                    : 'hover:brightness-90 hover:scale-105'
+                                    }`}
+                            >
+                                {loading ? (
+                                    <>
+                                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                                        שולח...
+                                    </>
+                                ) : (
+                                    <>
+                                        שלח הודעה
+                                        <span className="text-xl">→</span>
+                                    </>
+                                )}
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Contact Info */}
+                    <div className="mt-12 pt-8 border-t border-gray-200">
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
+                            <div>
+                                <h4 className="subtitle font-semibold mb-1">טלפון</h4>
+                                <p className="content-text">{businessInfo.phone}</p>
+                            </div>
+                            <div>
+                                <h4 className="subtitle font-semibold mb-1">אימייל</h4>
+                                <p className="content-text">{businessInfo.email}</p>
+                            </div>
+                            <div>
+                                <h4 className="subtitle font-semibold mb-1">שעות פעילות</h4>
+                                <p className="content-text">{businessInfo.hours}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ContactUs;

package/dist/components/MasonryItemCard.jsx

@@ -0,0 +1,351 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, ChevronLeft, ChevronRight } from 'lucide-react';
+import useScrollLock from '../hooks/useScrollLock'
+
+const MasonryImageList = ({ images = [], cols = 3, onImageClick = () => { } }) => {
+  // cols is the desktop column count; mobile will be forced to 2 via CSS
+  return (
+    <>
+      <div
+        className="masonry-columns h-full overflow-y-auto"
+        // set CSS variable so the component can control desktop column count
+        style={{ ['--masonry-cols']: cols }}
+      >
+        {images.map((img, i) => (
+          <button
+            key={i}
+            className="masonry-item w-full block mb-4 p-0 border-0 bg-transparent text-left"
+            onClick={() => onImageClick(i)}
+            aria-label={`open image ${i + 1}`}
+          >
+            <img
+              src={img.src || img}
+              alt={img.alt || `image-${i + 1}`}
+              loading="lazy"
+              className="masonry-img w-full h-auto rounded-lg block"
+              style={{ display: 'block' }}
+            />
+          </button>
+        ))}
+      </div>
+
+      <style jsx>{`
+        /* Container uses CSS columns to create the masonry stacking */
+        .masonry-columns {
+          column-gap: 0.75rem;
+          /* default: mobile 2 columns */
+          column-count: 2;
+          padding-right: 0.25rem; /* small padding so rtl scroll doesn't cut content */
+        }
+
+        /* Desktop: use the --masonry-cols variable */
+        @media (min-width: 1024px) {
+          .masonry-columns {
+            column-count: var(--masonry-cols);
+          }
+        }
+
+        /* Make each item avoid breaking across columns and have bottom margin */
+        .masonry-item {
+          /* avoid splitting an item between columns */
+          break-inside: avoid;
+          -webkit-column-break-inside: avoid;
+          page-break-inside: avoid;
+          margin-bottom: 0.75rem;
+        }
+
+        /* Image style */
+        .masonry-img {
+          width: 100%;
+          height: auto;
+          display: block;
+          object-fit: cover;
+          /* give images a subtle shadow & transition if desired */
+          transition: transform 0.2s ease, box-shadow 0.15s ease;
+        }
+        .masonry-item:hover .masonry-img {
+          transform: translateY(-2px) scale(1.01);
+        }
+
+        /* Optional: nicer scrollbar for the image column */
+        .masonry-columns::-webkit-scrollbar {
+          width: 10px;
+        }
+        .masonry-columns::-webkit-scrollbar-thumb {
+          border-radius: 9999px;
+          background: rgba(0, 0, 0, 0.12);
+        }
+      `}</style>
+    </>
+  );
+};
+
+// Image lightbox modal component
+const ImageLightbox = ({
+  images,
+  currentIndex,
+  isOpen,
+  onClose,
+  onNavigate
+}) => {
+  const currentImage = images[currentIndex];
+
+  useScrollLock(isOpen);
+
+  if (!currentImage) return null;
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center supports-[height:100dvh]:h-[100dvh]">
+          {/* Backdrop */}
+          <motion.div
+            key="backdrop"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="absolute inset-0 bg-black bg-opacity-90"
+            onClick={onClose}
+          />
+
+          {/* Image Container */}
+          <motion.div
+            key="image-container"
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            transition={{ type: "spring", stiffness: 300, damping: 25 }}
+            className="relative max-w-[90vw] max-h-[90vh] z-10"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Main Image */}
+            <img
+              src={currentImage.src}
+              alt={currentImage.alt || currentImage.title || 'Gallery image'}
+              className="w-screen h-screen object-contain rounded-lg shadow-2xl"
+            />
+
+            {/* Close Button */}
+            <button
+              onClick={onClose}
+              className="absolute top-4 right-4 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-2 rounded-full transition-all duration-200"
+              aria-label="Close lightbox"
+            >
+              <X size={24} />
+            </button>
+
+            {/* Navigation Arrows */}
+            {images.length > 1 && (
+              <>
+                {currentIndex > 0 && (
+                  <button
+                    onClick={() => onNavigate(currentIndex - 1)}
+                    className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-3 rounded-full transition-all duration-200"
+                    aria-label="Previous image"
+                  >
+                    <ChevronLeft size={24} />
+                  </button>
+                )}
+
+                {currentIndex < images.length - 1 && (
+                  <button
+                    onClick={() => onNavigate(currentIndex + 1)}
+                    className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-3 rounded-full transition-all duration-200"
+                    aria-label="Next image"
+                  >
+                    <ChevronRight size={24} />
+                  </button>
+                )}
+              </>
+            )}
+
+            {/* Image Counter */}
+            {images.length > 1 && (
+              <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-50 text-white px-3 py-1 rounded-full text-sm">
+                {currentIndex + 1} / {images.length}
+              </div>
+            )}
+
+            {/* Image Title */}
+            {currentImage.title && (
+              <div className="absolute bottom-4 right-4 bg-black bg-opacity-50 text-white px-3 py-2 rounded-lg max-w-xs">
+                <div className="text-sm font-medium" dir="rtl">
+                  {currentImage.title}
+                </div>
+              </div>
+            )}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+const MasonryItemCard = ({
+  images = [],
+  title,
+  subtitle,
+  description,
+  reverse = false,
+  textCols = 1,
+  imagesCols = 1,
+  mobileHeight = '60vh', // used for small screens
+  enableLightbox = true,
+  onImageClick,
+  className = '',
+  cols = 3, // default for desktop masonry (we want 3 per row on desktop)
+  ...props
+}) => {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  const totalCols = textCols + imagesCols;
+  // CSS variables to be applied to grid wrapper:
+  const textPct = `${(textCols / totalCols) * 100}%`;
+  const imagesPct = `${(imagesCols / totalCols) * 100}%`;
+
+  const handleImageClick = useCallback(
+    (index) => {
+      setCurrentImageIndex(index);
+
+      if (onImageClick) onImageClick(images[index], index);
+
+      if (enableLightbox) setLightboxOpen(true);
+    },
+    [images, onImageClick, enableLightbox]
+  );
+
+  const handleLightboxClose = useCallback(() => setLightboxOpen(false), []);
+  const handleLightboxNavigate = useCallback((index) => setCurrentImageIndex(index), []);
+
+  if (!images || images.length === 0) {
+    return (
+      <section className={`py-16 px-8 ${className}`} {...props}>
+        <div className="glass-card relative min-h-[48vh]">
+          <div className="max-w-7xl mx-auto px-6 pt-16">
+            <div className="text-center" dir="rtl">
+              <h2 className="title mb-4">{title}</h2>
+              <h3 className="subtitle mb-6">{subtitle}</h3>
+              <p className="content-text">אין תמונות להצגה</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <>
+      <section className={`relative w-full overflow-visible py-16 px-4 ${className}`} {...props}>
+        {/* NOTE: --text-frac / --image-frac are set inline so CSS can use them at lg and up */}
+        <div
+          className="glass-card relative min-h-[48vh] flex flex-col"
+          style={{ '--text-frac': textPct, '--image-frac': imagesPct }}
+        >
+          {/* top padding/content wrapper */}
+          <div className="max-w-7xl mx-auto px-6 pt-16 w-full flex-1">
+            {/* layout-grid will switch to two-column fractions on lg+ */}
+            <div className="layout-grid w-full h-full" dir="rtl">
+              {/* Text Content */}
+              <div
+                className={`text-column ${reverse ? 'lg:order-2' : 'lg:order-1'} px-2`}
+              >
+                <h2 className="title mb-6">{title}</h2>
+                <h3 className="subtitle mb-6">{subtitle}</h3>
+                <p className="content-text max-w-md mx-auto lg:mx-0">{description}</p>
+              </div>
+
+              {/* Desktop Masonry Images (visible on lg+) */}
+              <div
+                className={`image-column hidden lg:block ${reverse ? 'lg:order-1' : 'lg:order-2'} px-2 mb-8`}
+              >
+                {/* image-column fills available height and scrolls if needed */}
+                <MasonryImageList
+                  images={images}
+                  onImageClick={handleImageClick}
+                  cols={cols /* desktop: 3 by default from caller prop */}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Mobile Masonry Images (visible on mobile) */}
+          <div
+            className="block lg:hidden mt-8 w-full px-4"
+            style={{ height: mobileHeight }}
+          >
+            <MasonryImageList
+              images={images}
+              onImageClick={handleImageClick}
+              cols={2} // mobile: 2 per row
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Lightbox */}
+      {enableLightbox && (
+        <ImageLightbox
+          images={images}
+          currentIndex={currentImageIndex}
+          isOpen={lightboxOpen}
+          onClose={handleLightboxClose}
+          onNavigate={handleLightboxNavigate}
+        />
+      )}
+
+      {/* Component styles */}
+      <style jsx>{`
+        /* The overall grid - single column by default; switches to two fractional columns at lg+ */
+        .layout-grid {
+          display: grid;
+          grid-template-columns: 1fr;
+          gap: 3rem;
+        }
+
+        /* At large screens, use the fractional widths computed in inline styles */
+        @media (min-width: 1024px) {
+          .layout-grid {
+            /* use CSS variables set from JS: --text-frac and --image-frac */
+            grid-template-columns: var(--text-frac) var(--image-frac);
+            align-items: start;
+            gap: 3rem;
+            height: 100%;
+          }
+
+          .text-column {
+            /* ensure text column doesn't overflow the parent */
+            height: 100%;
+          }
+
+          .image-column {
+            /* make image column take full height of the parent wrapper and be scrollable */
+            height: 100%;
+            max-height: 100%;
+            overflow-y: auto;
+          }
+        }
+
+        /* Keep mobile images area scrollable if images exceed mobileHeight (we set that inline) */
+        @media (max-width: 1023px) {
+          .layout-grid {
+            gap: 1.5rem;
+          }
+        }
+
+        /* Optional: small visual tweak to hide scrollbar in WebKit (if you want) */
+        .image-column::-webkit-scrollbar {
+          width: 8px;
+        }
+        .image-column::-webkit-scrollbar-thumb {
+          border-radius: 9999px;
+          background: rgba(0, 0, 0, 0.2);
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default MasonryItemCard;

package/dist/styles/shared-components.css

@@ -0,0 +1,29 @@
+    /* Glass Card - Glassmorphism Effect */
+    .glass-card {
+        @apply rounded-xl backdrop-blur-md;
+        background-color: var(--card-bg);
+        background: color-mix(in srgb, var(--card-bg) 75%, transparent);
+        backdrop-filter: blur(10px);
+        box-shadow: 0 8px 32px 0 color-mix(in srgb, var(--primary) 20%, transparent);
+        border: 1px solid color-mix(in srgb, var(--card-bg) 30%, transparent);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .glass-button {
+        background: rgba(255, 107, 53, 0.2);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 107, 53, 0.3);
+        transition: all 0.3s ease;
+    }
+
+    .glass-button:hover {
+        background: rgba(255, 107, 53, 0.3);
+        transform: translateY(-2px);
+        box-shadow: 0 12px 24px rgba(255, 107, 53, 0.2);
+    }
+
+    .glass-card:hover {
+        background: color-mix(in srgb, var(--card-bg) 55%, transparent);
+        box-shadow: 0 12px 40px 0 color-mix(in srgb, var(--primary) 30%, transparent);
+        transform: translateY(-2px);
+    }

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@codesinger0/shared-components",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "description": "Shared React components for customer projects",
   "main": "dist/index.js",
   "files": [
-    "dist"
+    "dist",
+    "dist/styles"
   ],
   "scripts": {
     "build": "rm -fr dist; cp -r src dist"