mautourco-components 0.1.1

package/src/components/atoms/Icon/icons/CalendarIcon.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+interface CalendarIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+  /**
+   * Couleur par défaut si aucune couleur n'est spécifiée
+   */
+  defaultColor?: string;
+}
+
+const CalendarIcon: React.FC<CalendarIconProps> = ({
+  size = 'md',
+  className = '',
+  color,
+  defaultColor = '#7F8594'
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs': return 'w-3 h-3';
+      case 'sm': return 'w-4 h-4';
+      case 'md': return 'w-5 h-5';
+      case 'lg': return 'w-6 h-6';
+      case 'xl': return 'w-8 h-8';
+      default: return 'w-5 h-5';
+    }
+  };
+
+  const getSizeValues = () => {
+    switch (size) {
+      case 'xs': return { width: 10, height: 11 };
+      case 'sm': return { width: 12, height: 13 };
+      case 'md': return { width: 14, height: 15 };
+      case 'lg': return { width: 16, height: 17 };
+      case 'xl': return { width: 18, height: 19 };
+      default: return { width: 14, height: 15 };
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const sizeValues = getSizeValues();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg 
+      className={classes}
+      width={sizeValues.width} 
+      height={sizeValues.height} 
+      viewBox="0 0 14 15" 
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path 
+        d="M12 6.83301H1.5V12.75C1.5 13.0721 1.76099 13.3328 2.08301 13.333H11.417C11.739 13.3328 12 13.0721 12 12.75V6.83301ZM4.08984 10.667C4.50406 10.667 4.83984 11.0028 4.83984 11.417C4.83967 11.8311 4.50395 12.167 4.08984 12.167H4.08301C3.66905 12.1668 3.33318 11.8309 3.33301 11.417C3.33301 11.0029 3.66894 10.6672 4.08301 10.667H4.08984ZM6.75684 10.667C7.17097 10.6671 7.50684 11.0028 7.50684 11.417C7.50666 11.831 7.17086 12.1669 6.75684 12.167H6.75C6.3359 12.167 6.00018 11.8311 6 11.417C6 11.0028 6.33579 10.667 6.75 10.667H6.75684ZM9.42285 10.667C9.83706 10.667 10.1729 11.0028 10.1729 11.417C10.1727 11.8311 9.83696 12.167 9.42285 12.167H9.41699C9.00289 12.167 8.66717 11.8311 8.66699 11.417C8.66699 11.0028 9.00278 10.667 9.41699 10.667H9.42285ZM4.08984 8L4.16699 8.00391C4.54504 8.04246 4.83984 8.36178 4.83984 8.75C4.83984 9.13822 4.54504 9.45754 4.16699 9.49609L4.08984 9.5H4.08301C3.66894 9.49982 3.33301 9.1641 3.33301 8.75C3.33301 8.33589 3.66894 8.00018 4.08301 8H4.08984ZM6.75684 8L6.83301 8.00391C7.21136 8.04216 7.50684 8.36156 7.50684 8.75C7.50684 9.13844 7.21136 9.45784 6.83301 9.49609L6.75684 9.5H6.75C6.33579 9.5 6 9.16421 6 8.75C6 8.33579 6.33579 8 6.75 8H6.75684ZM9.42285 8L9.5 8.00391C9.8782 8.04231 10.1729 8.36167 10.1729 8.75C10.1729 9.13833 9.8782 9.45769 9.5 9.49609L9.42285 9.5H9.41699C9.00278 9.5 8.66699 9.16421 8.66699 8.75C8.66699 8.33579 9.00278 8 9.41699 8H9.42285ZM8.66699 3.41699V2.83301H4.83301V3.41699C4.83283 3.83106 4.49711 4.16699 4.08301 4.16699C3.66905 4.16682 3.33318 3.83095 3.33301 3.41699V2.83301H2.08301C1.76099 2.83318 1.5 3.09493 1.5 3.41699V5.33301H12V3.41699C12 3.09493 11.739 2.83318 11.417 2.83301H10.167V3.41699C10.1668 3.83095 9.83095 4.16682 9.41699 4.16699C9.00289 4.16699 8.66717 3.83106 8.66699 3.41699ZM13.5 12.75C13.5 13.9005 12.5674 14.8328 11.417 14.833H2.08301C0.932564 14.8328 0 13.9005 0 12.75V3.41699C0 2.26651 0.932564 1.33318 2.08301 1.33301H3.33301V0.75C3.33301 0.335895 3.66894 0.000175955 4.08301 0C4.49722 0 4.83301 0.335786 4.83301 0.75V1.33301H8.66699V0.75C8.66699 0.335786 9.00278 0 9.41699 0C9.83106 0.000175698 10.167 0.335895 10.167 0.75V1.33301H11.417C12.5674 1.33318 13.5 2.26651 13.5 3.41699V12.75Z" 
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default CalendarIcon;

package/src/components/atoms/Icon/icons/CarIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface CarIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const CarIcon: React.FC<CarIconProps> = ({
+  size = 'md',
+  className = '',
+  color
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs': return 'w-3 h-3';
+      case 'sm': return 'w-4 h-4';
+      case 'md': return 'w-5 h-5';
+      case 'lg': return 'w-6 h-6';
+      case 'xl': return 'w-8 h-8';
+      default: return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 15 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.08301 6.83301C3.76099 6.83318 3.5 7.09493 3.5 7.41699C3.50018 7.7389 3.7611 7.99982 4.08301 8C4.40507 8 4.66682 7.73901 4.66699 7.41699C4.66699 7.09483 4.40517 6.83301 4.08301 6.83301ZM10.75 6.83301C10.4278 6.83301 10.167 7.09483 10.167 7.41699C10.1672 7.73901 10.4279 8 10.75 8C11.0721 8 11.3328 7.73901 11.333 7.41699C11.333 7.09483 11.0722 6.83301 10.75 6.83301ZM14.833 6.75C14.833 7.12036 14.7068 7.48744 14.4307 7.76367C14.1545 8.03984 13.7873 8.16692 13.417 8.16699H12.6914C12.39 8.94635 11.6357 9.5 10.75 9.5C9.86427 9.5 9.11001 8.94635 8.80859 8.16699H6.02539C5.72403 8.94646 4.96882 9.5 4.08301 9.5C3.19738 9.49986 2.44295 8.94631 2.1416 8.16699H1.41699C1.04663 8.16699 0.679553 8.03981 0.40332 7.76367C0.127069 7.48742 1.08773e-07 7.12044 0 6.75V4.08301C3.58734e-05 3.72816 0.0587414 3.37571 0.173828 3.04004L0.208008 2.95703L1.1416 1.02441L1.17383 0.963867C1.45555 0.494509 1.99662 0 2.75 0H7.41699C8.02313 8.21201e-05 8.52812 0.229169 8.92285 0.508789L9.08496 0.630859L9.14746 0.686523C9.45504 0.994111 9.8275 1.38402 10.1201 1.69336C10.2607 1.84193 10.3843 1.9728 10.4746 2.06934C10.4981 2.07467 10.5232 2.08085 10.5498 2.08691C10.7388 2.12996 11.0034 2.19034 11.3057 2.26172C11.9079 2.40391 12.6696 2.59002 13.2842 2.76074H13.2832C14.1168 2.97812 14.833 3.78677 14.833 4.75V6.75ZM1.5 6.66699H2.1416C2.4428 5.88737 3.19716 5.33314 4.08301 5.33301C4.96903 5.33301 5.72418 5.88722 6.02539 6.66699H8.80762C9.1088 5.88716 9.86393 5.33301 10.75 5.33301C11.6361 5.33301 12.3912 5.88716 12.6924 6.66699H13.333V4.75C13.333 4.52019 13.1268 4.26729 12.9014 4.21094C12.8952 4.20939 12.889 4.20776 12.8828 4.20605C12.2974 4.04344 11.5587 3.86282 10.9609 3.72168C10.6633 3.6514 10.4028 3.5912 10.2168 3.54883C10.1241 3.52772 10.0499 3.51144 9.99902 3.5C9.97361 3.49429 9.95361 3.48927 9.94043 3.48633C9.93409 3.48491 9.92908 3.48413 9.92578 3.4834C9.92422 3.48305 9.92268 3.4826 9.92188 3.48242H9.9209C9.77262 3.44947 9.63762 3.37196 9.53418 3.26074C9.53379 3.26033 9.53204 3.25867 9.53125 3.25781C9.52966 3.2561 9.52752 3.25334 9.52441 3.25C9.51806 3.24317 9.50837 3.2329 9.49609 3.21973C9.47155 3.19338 9.43544 3.15533 9.39062 3.10742C9.30073 3.01132 9.17495 2.87658 9.03027 2.72363C8.75146 2.42889 8.40768 2.07006 8.12207 1.7832C7.87973 1.59523 7.64931 1.50009 7.41699 1.5H2.75C2.72309 1.5 2.68485 1.50768 2.63184 1.54395C2.57804 1.58075 2.51904 1.64171 2.46777 1.72363L1.58301 3.55762C1.52838 3.72738 1.50003 3.90454 1.5 4.08301V6.66699Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default CarIcon;

package/src/components/atoms/Icon/icons/Check.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface CheckProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const Check: React.FC<CheckProps> = ({
+  size = 'md',
+  className = '',
+  color
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs': return 'w-3 h-3';
+      case 'sm': return 'w-4 h-4';
+      case 'md': return 'w-5 h-5';
+      case 'lg': return 'w-6 h-6';
+      case 'xl': return 'w-8 h-8';
+      default: return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : '';
+  const classes = `${sizeClasses} ${colorClass} ${className}`.trim();
+
+  return (
+    <svg className={classes} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M20 6L9 17L4 12" />
+    </svg>
+  );
+};
+
+export default Check;

package/src/components/atoms/Icon/icons/CheckCircleIcon.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+interface CheckCircleIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const CheckCircleIcon: React.FC<CheckCircleIconProps> = ({
+  size = 'md',
+  className = '',
+  color
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs': return 'w-3 h-3';
+      case 'sm': return 'w-4 h-4';
+      case 'md': return 'w-5 h-5';
+      case 'lg': return 'w-6 h-6';
+      case 'xl': return 'w-8 h-8';
+      default: return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.88622 5.55319C9.17905 5.26035 9.65386 5.26046 9.94676 5.55319C10.2397 5.84608 10.2397 6.32084 9.94676 6.61374L7.28075 9.28073C7.14017 9.42131 6.94927 9.50037 6.75047 9.50046C6.55171 9.50046 6.36082 9.42118 6.2202 9.28073L4.88622 7.94675C4.59365 7.65383 4.59343 7.17898 4.88622 6.8862C5.179 6.59341 5.65384 6.59363 5.94676 6.8862L6.7495 7.68893L8.88622 5.55319Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.41699 0C11.5128 0.000176261 14.8328 3.32116 14.833 7.41699C14.8328 11.5128 11.5128 14.8328 7.41699 14.833C3.32099 14.833 0.000176263 11.513 0 7.41699C0.000197928 3.32105 3.321 0 7.41699 0ZM7.41699 1.5C4.14943 1.5 1.5002 4.14948 1.5 7.41699C1.50018 10.6845 4.14942 13.333 7.41699 13.333C10.6844 13.3328 13.3328 10.6844 13.333 7.41699C13.3328 4.14958 10.6844 1.50018 7.41699 1.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default CheckCircleIcon;

package/src/components/atoms/Icon/icons/Chevron.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+interface ChevronProps {
+  direction?: 'up' | 'down' | 'left' | 'right';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const Chevron: React.FC<ChevronProps> = ({
+  direction = 'down',
+  size = 'md',
+  className = '',
+  color
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs': return 'w-3 h-3';
+      case 'sm': return 'w-4 h-4';
+      case 'md': return 'w-5 h-5';
+      case 'lg': return 'w-6 h-6';
+      case 'xl': return 'w-8 h-8';
+      default: return 'w-5 h-5';
+    }
+  };
+
+  const getDirectionStyle = () => {
+    switch (direction) {
+      case 'up': return { transform: 'rotate(0deg)' };
+      case 'down': return { transform: 'rotate(0deg)' };
+      case 'left': return { transform: 'rotate(360deg)' };
+      case 'right': return { transform: 'rotate(360deg)' };
+      default: return { transform: 'rotate(0deg)' };
+    }
+  };
+
+  const getPath = () => {
+    switch (direction) {
+      case 'up':
+        return <path d="M18 15L12 9L6 15" />;
+      case 'down':
+        return <path d="M6 9L12 15L18 9" />;
+      case 'left':
+        return <path d="M15 18L9 12L15 6" />;
+      case 'right':
+        return <path d="M9 18L15 12L9 6" />;
+      default:
+        return <path d="M6 9L12 15L18 9" />;
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const directionStyle = getDirectionStyle();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg 
+      className={classes} 
+      style={directionStyle}
+      viewBox="0 0 24 24" 
+      fill="none" 
+      stroke="currentColor" 
+      strokeWidth="2" 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    >
+      {getPath()}
+    </svg>
+  );
+};
+
+export default Chevron;

package/src/components/atoms/Icon/icons/ChevronDownIcon.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+interface ChevronDownIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const ChevronDownIcon: React.FC<ChevronDownIconProps> = ({
+  size = 'md',
+  className = '',
+  color
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs': return 'w-3 h-3';
+      case 'sm': return 'w-4 h-4';
+      case 'md': return 'w-5 h-5';
+      case 'lg': return 'w-6 h-6';
+      case 'xl': return 'w-8 h-8';
+      default: return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 15 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.4707 0.571533H2.07621C0.87817 0.571533 0.163582 1.90675 0.828137 2.90358L6.02536 10.6994C6.6191 11.59 7.92778 11.59 8.52151 10.6994L13.7187 2.90358C14.3833 1.90675 13.6687 0.571533 12.4707 0.571533Z"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="1.14286"
+      />
+    </svg>
+  );
+};
+
+export default ChevronDownIcon;

package/src/components/atoms/Icon/icons/Close.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface CloseProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const Close: React.FC<CloseProps> = ({ size = 'md', className = '', color }) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs': return 'w-2.5 h-2.5'; // 10px
+      case 'sm': return 'w-3 h-3';     // 12px
+      case 'md': return 'w-4 h-4';     // 16px
+      case 'lg': return 'w-5 h-5';     // 20px
+      case 'xl': return 'w-6 h-6';     // 24px
+      default: return 'w-4 h-4';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.76886 1.17002C8.06167 0.877211 8.5365 0.877384 8.82941 1.17002C9.1223 1.46291 9.1223 1.93767 8.82941 2.23056L6.05988 5.0001L8.82941 7.76963L8.88117 7.82627C9.12153 8.12085 9.10403 8.55555 8.82941 8.83017C8.55479 9.1048 8.12009 9.12229 7.8255 8.88193L7.76886 8.83017L4.99933 6.06064L2.2298 8.83017C1.93691 9.12305 1.46214 9.12306 1.16925 8.83017C0.876626 8.53726 0.876463 8.06244 1.16925 7.76963L3.93879 5.0001L1.16925 2.23056C0.876362 1.93767 0.876362 1.46291 1.16925 1.17002C1.46215 0.877125 1.93691 0.877125 2.2298 1.17002L4.99933 3.93955L7.76886 1.17002Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default Close;

package/src/components/atoms/Icon/icons/DeleteIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface DeleteIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const DeleteIcon: React.FC<DeleteIconProps> = ({
+  size = 'md',
+  className = '',
+  color
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs': return 'w-3 h-3';
+      case 'sm': return 'w-4 h-4';
+      case 'md': return 'w-5 h-5';
+      case 'lg': return 'w-6 h-6';
+      case 'xl': return 'w-8 h-8';
+      default: return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 14 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.667 4.16699H2.83301V12.75C2.83301 12.8394 2.88553 12.992 3.03027 13.1367C3.17497 13.2813 3.32762 13.333 3.41699 13.333H10.083C10.1724 13.333 10.325 13.2813 10.4697 13.1367C10.6145 12.992 10.667 12.8394 10.667 12.75V4.16699ZM4.66699 10.75V6.75C4.66699 6.33579 5.00278 6 5.41699 6C5.83106 6.00018 6.16699 6.3359 6.16699 6.75V10.75C6.16699 11.1641 5.83106 11.4998 5.41699 11.5C5.00278 11.5 4.66699 11.1642 4.66699 10.75ZM7.33301 10.75V6.75C7.33301 6.3359 7.66894 6.00018 8.08301 6C8.49722 6 8.83301 6.33579 8.83301 6.75V10.75C8.83301 11.1642 8.49722 11.5 8.08301 11.5C7.66894 11.4998 7.33301 11.1641 7.33301 10.75ZM8.66699 2.08301C8.66687 1.99359 8.61417 1.84178 8.46973 1.69727C8.32499 1.55253 8.17242 1.5 8.08301 1.5H5.41699C5.32758 1.5 5.17501 1.55253 5.03027 1.69727C4.88583 1.84178 4.83313 1.99359 4.83301 2.08301V2.66699H8.66699V2.08301ZM10.167 2.66699H12.75L12.8271 2.6709C13.2051 2.70954 13.5 3.02884 13.5 3.41699C13.4998 3.80502 13.205 4.12449 12.8271 4.16309L12.75 4.16699H12.167V12.75C12.167 13.3273 11.8855 13.842 11.5303 14.1973C11.175 14.5524 10.6602 14.833 10.083 14.833H3.41699C2.83982 14.833 2.32498 14.5524 1.96973 14.1973C1.61447 13.842 1.33301 13.3273 1.33301 12.75V4.16699H0.75C0.335895 4.16699 0.000175955 3.83106 0 3.41699C0 3.00278 0.335786 2.66699 0.75 2.66699H3.33301V2.08301C3.33311 1.50597 3.61461 0.991906 3.96973 0.636719C4.32499 0.281459 4.83974 0 5.41699 0H8.08301C8.66026 0 9.17501 0.281459 9.53027 0.636719C9.88539 0.991906 10.1669 1.50597 10.167 2.08301V2.66699Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default DeleteIcon;

package/src/components/atoms/Icon/icons/DepartureIcon.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+interface DepartureIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const DepartureIcon: React.FC<DepartureIconProps> = ({
+  size = 'md',
+  className = '',
+  color
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs': return 'w-3 h-3';
+      case 'sm': return 'w-4 h-4';
+      case 'md': return 'w-5 h-5';
+      case 'lg': return 'w-6 h-6';
+      case 'xl': return 'w-8 h-8';
+      default: return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 15 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {/* Baseline */}
+      <path
+        d="M14.0831 11.1032C14.4973 11.1032 14.8331 11.4391 14.8331 11.8532C14.8331 12.2674 14.4974 12.6032 14.0831 12.6032H0.750135C0.335921 12.6032 0.000134688 12.2674 0.000134688 11.8532C0.000179524 11.4391 0.335949 11.1032 0.750135 11.1032H14.0831Z"
+        fill="currentColor"
+      />
+      {/* Plane */}
+      <path
+        d="M4.13685 0.00948145C4.51966 0.0461139 4.88541 0.187311 5.19252 0.418661L7.8722 2.41866L7.87806 2.42354C7.96448 2.48916 8.06789 2.52947 8.17592 2.53975C8.28402 2.54998 8.39309 2.52943 8.49037 2.48116L8.49232 2.48018L11.2794 1.11007L11.4787 1.0212C11.8851 0.861562 12.3282 0.817771 12.7579 0.895224L12.9708 0.944052L12.9777 0.946005L13.6251 1.13253C13.8636 1.1998 14.0835 1.31875 14.2706 1.48116C14.4593 1.64495 14.609 1.84893 14.7091 2.07784C14.8093 2.30699 14.8577 2.55638 14.8497 2.80636C14.8419 3.05314 14.778 3.29431 14.6662 3.51436L14.6681 3.51534L14.4142 4.02218C14.1905 4.46947 13.8296 4.84085 13.3712 5.07491L13.3634 5.07882L4.80385 9.32491C4.4631 9.49369 4.08295 9.56515 3.70619 9.5339C3.64831 9.53772 3.58966 9.53596 3.53138 9.52608L1.95814 9.25948C1.72228 9.2195 1.51923 9.06915 1.41224 8.85518L0.0792362 6.18917C-0.106006 5.81869 0.04469 5.36758 0.415174 5.18233L1.1476 4.81612C1.43787 4.67017 1.75823 4.59449 2.08314 4.59444C2.3275 4.59444 2.56962 4.63704 2.79799 4.72042L3.02064 4.8171L3.06361 4.84054L3.14564 4.88839C3.22405 4.92584 3.30962 4.94598 3.39662 4.946C3.48779 4.946 3.57789 4.92453 3.65931 4.8835L3.6681 4.87862L3.73939 4.84347L2.07924 1.52218C1.99036 1.34442 1.97552 1.13848 2.03822 0.949911C2.10112 0.761206 2.23726 0.604297 2.41517 0.515341L3.01869 0.213583C3.36515 0.0431474 3.7525 -0.0272494 4.13685 0.00948145ZM3.99428 1.50265C3.91461 1.49502 3.8345 1.50356 3.75892 1.52804L5.42103 4.85128C5.51057 5.0304 5.52442 5.23781 5.4601 5.42745C5.39574 5.61713 5.25836 5.77338 5.07826 5.86104L4.33314 6.22237L4.33412 6.22335C4.04339 6.3698 3.72215 6.446 3.39662 6.446C3.07106 6.44598 2.74986 6.36985 2.45912 6.22335C2.44463 6.21605 2.43014 6.20814 2.41615 6.19991L2.32924 6.14815C2.25233 6.11244 2.16809 6.09444 2.08314 6.09444C1.99228 6.09449 1.9026 6.11517 1.82142 6.15597L1.81849 6.15792L1.75599 6.18819L2.58412 7.84444L3.64369 8.02413C3.68946 8.02333 3.73551 8.02617 3.78138 8.0339C3.90246 8.0543 4.0268 8.03559 4.13685 7.98116L12.6886 3.738C12.8568 3.6521 12.9894 3.5172 13.0724 3.35128L13.3302 2.83663C13.3427 2.81244 13.3498 2.7857 13.3507 2.7585C13.3516 2.73136 13.3459 2.70431 13.3351 2.6794C13.3242 2.65445 13.3078 2.63183 13.2872 2.61397C13.2667 2.59616 13.2422 2.58317 13.216 2.57589L13.2091 2.57393L12.5665 2.38839C12.362 2.33231 12.1437 2.35441 11.9542 2.44991L11.9474 2.45284L9.15443 3.82589C8.80717 3.99767 8.41905 4.06965 8.03334 4.03292C7.64682 3.99611 7.27787 3.85202 6.96888 3.6169L4.29506 1.62081L4.29115 1.61788C4.20494 1.55262 4.1019 1.51295 3.99428 1.50265Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default DepartureIcon;

package/src/components/atoms/Icon/icons/EyeIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface EyeIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const EyeIcon: React.FC<EyeIconProps> = ({
+  size = 'md',
+  className = '',
+  color
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs': return 'w-3 h-3';
+      case 'sm': return 'w-4 h-4';
+      case 'md': return 'w-5 h-5';
+      case 'lg': return 'w-6 h-6';
+      case 'xl': return 'w-8 h-8';
+      default: return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 15 11"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.41667 0C8.98451 0 10.5171 0.465849 11.82 1.33789C13.0414 2.15543 14.0101 3.29532 14.6188 4.62891L14.735 4.89844L14.7448 4.92285C14.8629 5.24092 14.8629 5.59112 14.7448 5.90918C14.7417 5.91754 14.7384 5.92633 14.735 5.93457C14.1372 7.3838 13.1228 8.62316 11.82 9.49512C10.5171 10.3671 8.98448 10.832 7.41667 10.832C5.84887 10.832 4.31628 10.3671 3.01335 9.49512C1.71054 8.62316 0.696101 7.3838 0.098315 5.93457C0.0949144 5.92632 0.0916538 5.91754 0.0885494 5.90918C-0.0295165 5.59112 -0.0295165 5.24092 0.0885494 4.92285C0.0916061 4.91463 0.094972 4.90654 0.098315 4.89844C0.696054 3.44909 1.71049 2.20993 3.01335 1.33789C4.31629 0.465851 5.84884 2.26536e-06 7.41667 0ZM7.41667 1.5C6.14591 1.5 4.9034 1.87717 3.84734 2.58398C2.80764 3.27989 1.99474 4.26462 1.50749 5.41602C1.99468 6.5675 2.80763 7.55207 3.84734 8.24805C4.9034 8.95486 6.14591 9.33203 7.41667 9.33203C8.68745 9.33203 9.92994 8.95486 10.986 8.24805C12.0256 7.55214 12.8377 6.56736 13.3249 5.41602C12.8376 4.26477 12.0256 3.27982 10.986 2.58398C9.92994 1.87717 8.68745 1.5 7.41667 1.5ZM8.66667 5.41602C8.66654 4.72577 8.10695 4.16602 7.41667 4.16602C6.7264 4.16602 6.1668 4.72577 6.16667 5.41602C6.16667 6.10637 6.72632 6.66601 7.41667 6.66602C8.10703 6.66602 8.66667 6.10637 8.66667 5.41602ZM10.1667 5.41602C10.1667 6.9348 8.93546 8.16602 7.41667 8.16602C5.8979 8.16601 4.66667 6.9348 4.66667 5.41602C4.6668 3.89735 5.89798 2.66602 7.41667 2.66602C8.93538 2.66602 10.1665 3.89734 10.1667 5.41602Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default EyeIcon;

package/src/components/atoms/Icon/icons/FacebookIcon.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+interface FacebookIconProps {
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  className?: string;
+  color?: string;
+}
+
+const FacebookIcon: React.FC<FacebookIconProps> = ({
+  size = "md",
+  className = "",
+  color,
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case "xs":
+        return "w-3 h-3";
+      case "sm":
+        return "w-4 h-4";
+      case "md":
+        return "w-5 h-5";
+      case "lg":
+        return "w-6 h-6";
+      case "xl":
+        return "w-8 h-8";
+      default:
+        return "w-5 h-5";
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : "text-current";
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      className={classes}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.25 1.5H3.75C3.15326 1.5 2.58097 1.73705 2.15901 2.15901C1.73705 2.58097 1.5 3.15326 1.5 3.75L1.5 20.25C1.5 20.8467 1.73705 21.419 2.15901 21.841C2.58097 22.2629 3.15326 22.5 3.75 22.5H10.1836V15.3605H7.23047V12H10.1836V9.43875C10.1836 6.52547 11.918 4.91625 14.5744 4.91625C15.8466 4.91625 17.1769 5.14313 17.1769 5.14313V8.0025H15.7111C14.2669 8.0025 13.8164 8.89875 13.8164 9.81797V12H17.0405L16.5248 15.3605H13.8164V22.5H20.25C20.8467 22.5 21.419 22.2629 21.841 21.841C22.2629 21.419 22.5 20.8467 22.5 20.25V3.75C22.5 3.15326 22.2629 2.58097 21.841 2.15901C21.419 1.73705 20.8467 1.5 20.25 1.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default FacebookIcon;

package/src/components/atoms/Icon/icons/InfoIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface InfoIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const InfoIcon: React.FC<InfoIconProps> = ({
+  size = 'md',
+  className = '',
+  color
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs': return 'w-3 h-3';
+      case 'sm': return 'w-4 h-4';
+      case 'md': return 'w-5 h-5';
+      case 'lg': return 'w-6 h-6';
+      case 'xl': return 'w-8 h-8';
+      default: return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.333 7.41699C13.333 4.14942 10.6845 1.50018 7.41699 1.5C4.14931 1.5 1.5 4.14931 1.5 7.41699C1.50018 10.6845 4.14942 13.333 7.41699 13.333C10.6844 13.3328 13.3328 10.6844 13.333 7.41699ZM6.66699 10.083V7.41699C6.66699 7.00278 7.00278 6.66699 7.41699 6.66699C7.83106 6.66717 8.16699 7.00289 8.16699 7.41699V10.083C8.16699 10.4971 7.83106 10.8328 7.41699 10.833C7.00278 10.833 6.66699 10.4972 6.66699 10.083ZM7.42285 4C7.83707 4 8.17285 4.33579 8.17285 4.75C8.17285 5.16421 7.83707 5.5 7.42285 5.5H7.41699C7.00278 5.5 6.66699 5.16421 6.66699 4.75C6.66699 4.33579 7.00278 4 7.41699 4H7.42285ZM14.833 7.41699C14.8328 11.5128 11.5128 14.8328 7.41699 14.833C3.32099 14.833 0.000176263 11.513 0 7.41699C0 3.32088 3.32088 0 7.41699 0C11.513 0.000176266 14.833 3.32099 14.833 7.41699Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default InfoIcon;

package/src/components/atoms/Icon/icons/LinkedInIcon.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+interface LinkedInIconProps {
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  className?: string;
+  color?: string;
+}
+
+const LinkedInIcon: React.FC<LinkedInIconProps> = ({
+  size = "md",
+  className = "",
+  color,
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case "xs":
+        return "w-3 h-3";
+      case "sm":
+        return "w-4 h-4";
+      case "md":
+        return "w-5 h-5";
+      case "lg":
+        return "w-6 h-6";
+      case "xl":
+        return "w-8 h-8";
+      default:
+        return "w-5 h-5";
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : "text-current";
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.20062 21H1.84688V6.97971H6.20062V21ZM4.02141 5.06721C2.62922 5.06721 1.5 3.91408 1.5 2.52189C1.5 1.85318 1.76565 1.21185 2.2385 0.738991C2.71136 0.266136 3.35269 0.000488281 4.02141 0.000488281C4.69012 0.000488281 5.33145 0.266136 5.80431 0.738991C6.27716 1.21185 6.54281 1.85318 6.54281 2.52189C6.54281 3.91408 5.41313 5.06721 4.02141 5.06721ZM22.4953 21H18.1509V14.175C18.1509 12.5485 18.1181 10.4625 15.8873 10.4625C13.6237 10.4625 13.2769 12.2297 13.2769 14.0578V21H8.92781V6.97971H13.1034V8.89221H13.1644C13.7456 7.79064 15.1655 6.62814 17.2838 6.62814C21.69 6.62814 22.5 9.52971 22.5 13.2985V21H22.4953Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default LinkedInIcon;