mautourco-components 0.2.4 → 0.2.7

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

@@ -1,44 +1,44 @@
-import React from 'react';
-
-interface StrollerIconProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-  color?: string;
-}
-
-const StrollerIcon: React.FC<StrollerIconProps> = ({
-  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 22 23"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M7.01181 19.1251C7.01181 18.642 6.62027 18.2509 6.13729 18.2506C5.65405 18.2506 5.26132 18.6418 5.26132 19.1251C5.26132 19.6083 5.65405 19.9996 6.13729 19.9996C6.62027 19.9993 7.01181 19.6081 7.01181 19.1251ZM17.0123 19.1251C17.0123 18.6418 16.6196 18.2506 16.1363 18.2506C15.6532 18.2508 15.2618 18.642 15.2618 19.1251C15.2618 19.6082 15.6532 19.9994 16.1363 19.9996C16.6196 19.9996 17.0123 19.6083 17.0123 19.1251ZM3.26767 10.2496C3.3265 11.2644 4.10011 12.0001 5.13681 12.0001H9.38632L8.07382 10.2496H3.26767ZM12.1988 12.0001H17.1368C18.1734 12 18.9471 11.2644 19.0059 10.2496H10.8849L12.1988 12.0001ZM15.8873 7.9996H18.9019C18.7346 7.06179 18.3778 6.16907 17.8531 5.37606L15.8873 7.9996ZM13.2623 7.74911L16.296 3.70321C15.4064 3.01703 14.366 2.55539 13.2623 2.35848V7.74911ZM21.2618 10.1251C21.2618 12.4464 19.4581 14.25 17.1368 14.2501H13.8863L15.2882 16.1192C15.5581 16.0432 15.8421 16.0006 16.1363 16.0006C17.8622 16.0006 19.2623 17.3992 19.2623 19.1251C19.2623 20.851 17.8622 22.2496 16.1363 22.2496C14.4106 22.2494 13.0118 20.8508 13.0118 19.1251C13.0118 18.5163 13.1868 17.9488 13.4879 17.4683L11.1353 14.3336L8.78427 17.4698C9.08519 17.9501 9.26181 18.5165 9.26181 19.1251C9.26181 20.8508 7.86291 22.2493 6.13729 22.2496C4.41141 22.2496 3.01132 20.851 3.01132 19.1251C3.01132 17.3992 4.41141 16.0006 6.13729 16.0006C6.43051 16.0006 6.71343 16.0437 6.98251 16.1192L8.38583 14.2501H5.13681C2.81549 14.2501 1.01181 12.4464 1.01181 10.1251V9.1246C1.01207 8.5035 1.51565 7.9996 2.13681 7.9996H6.38632L3.83603 4.59969C3.81108 4.5664 3.78828 4.53154 3.76718 4.49569C3.67261 4.33495 3.52574 4.21114 3.35116 4.14559C3.1764 4.08008 2.9833 4.07632 2.80624 4.13534C2.62965 4.19432 2.47892 4.31256 2.37851 4.46932C2.27802 4.62655 2.23322 4.81417 2.25399 4.9996C2.32326 5.61699 1.87966 6.1739 1.2623 6.24325C0.683524 6.30818 0.158284 5.92154 0.0376855 5.36434L0.0186426 5.25008L0.00106445 4.98934C-0.0149857 4.3792 0.150717 3.77554 0.481533 3.2579C0.859515 2.66649 1.42993 2.22301 2.09579 2.00106C2.76157 1.77923 3.48359 1.79283 4.14071 2.03915C4.77002 2.27513 5.30171 2.71208 5.65829 3.27987L9.19735 7.9996H11.0123V1.12508C11.0123 0.82441 11.1324 0.536624 11.3463 0.325279C11.5602 0.113924 11.8497 -0.00359995 12.1505 8.40768e-05C14.4876 0.0287631 16.7222 0.945197 18.4083 2.55624C18.4436 2.5771 18.4788 2.59993 18.5123 2.62508C18.6388 2.72006 18.7387 2.83726 18.8126 2.96639C20.3574 4.63872 21.2338 6.82636 21.2618 9.11141V10.1251Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-export default StrollerIcon;
+import React from 'react';
+
+interface StrollerIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const StrollerIcon: React.FC<StrollerIconProps> = ({
+  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 22 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.01181 19.1251C7.01181 18.642 6.62027 18.2509 6.13729 18.2506C5.65405 18.2506 5.26132 18.6418 5.26132 19.1251C5.26132 19.6083 5.65405 19.9996 6.13729 19.9996C6.62027 19.9993 7.01181 19.6081 7.01181 19.1251ZM17.0123 19.1251C17.0123 18.6418 16.6196 18.2506 16.1363 18.2506C15.6532 18.2508 15.2618 18.642 15.2618 19.1251C15.2618 19.6082 15.6532 19.9994 16.1363 19.9996C16.6196 19.9996 17.0123 19.6083 17.0123 19.1251ZM3.26767 10.2496C3.3265 11.2644 4.10011 12.0001 5.13681 12.0001H9.38632L8.07382 10.2496H3.26767ZM12.1988 12.0001H17.1368C18.1734 12 18.9471 11.2644 19.0059 10.2496H10.8849L12.1988 12.0001ZM15.8873 7.9996H18.9019C18.7346 7.06179 18.3778 6.16907 17.8531 5.37606L15.8873 7.9996ZM13.2623 7.74911L16.296 3.70321C15.4064 3.01703 14.366 2.55539 13.2623 2.35848V7.74911ZM21.2618 10.1251C21.2618 12.4464 19.4581 14.25 17.1368 14.2501H13.8863L15.2882 16.1192C15.5581 16.0432 15.8421 16.0006 16.1363 16.0006C17.8622 16.0006 19.2623 17.3992 19.2623 19.1251C19.2623 20.851 17.8622 22.2496 16.1363 22.2496C14.4106 22.2494 13.0118 20.8508 13.0118 19.1251C13.0118 18.5163 13.1868 17.9488 13.4879 17.4683L11.1353 14.3336L8.78427 17.4698C9.08519 17.9501 9.26181 18.5165 9.26181 19.1251C9.26181 20.8508 7.86291 22.2493 6.13729 22.2496C4.41141 22.2496 3.01132 20.851 3.01132 19.1251C3.01132 17.3992 4.41141 16.0006 6.13729 16.0006C6.43051 16.0006 6.71343 16.0437 6.98251 16.1192L8.38583 14.2501H5.13681C2.81549 14.2501 1.01181 12.4464 1.01181 10.1251V9.1246C1.01207 8.5035 1.51565 7.9996 2.13681 7.9996H6.38632L3.83603 4.59969C3.81108 4.5664 3.78828 4.53154 3.76718 4.49569C3.67261 4.33495 3.52574 4.21114 3.35116 4.14559C3.1764 4.08008 2.9833 4.07632 2.80624 4.13534C2.62965 4.19432 2.47892 4.31256 2.37851 4.46932C2.27802 4.62655 2.23322 4.81417 2.25399 4.9996C2.32326 5.61699 1.87966 6.1739 1.2623 6.24325C0.683524 6.30818 0.158284 5.92154 0.0376855 5.36434L0.0186426 5.25008L0.00106445 4.98934C-0.0149857 4.3792 0.150717 3.77554 0.481533 3.2579C0.859515 2.66649 1.42993 2.22301 2.09579 2.00106C2.76157 1.77923 3.48359 1.79283 4.14071 2.03915C4.77002 2.27513 5.30171 2.71208 5.65829 3.27987L9.19735 7.9996H11.0123V1.12508C11.0123 0.82441 11.1324 0.536624 11.3463 0.325279C11.5602 0.113924 11.8497 -0.00359995 12.1505 8.40768e-05C14.4876 0.0287631 16.7222 0.945197 18.4083 2.55624C18.4436 2.5771 18.4788 2.59993 18.5123 2.62508C18.6388 2.72006 18.7387 2.83726 18.8126 2.96639C20.3574 4.63872 21.2338 6.82636 21.2618 9.11141V10.1251Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default StrollerIcon;

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

@@ -1,50 +1,50 @@
-import React from "react";
-
-interface TwitterIconProps {
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  className?: string;
-  color?: string;
-}
-
-const TwitterIcon: React.FC<TwitterIconProps> = ({
-  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"
-      xmlns="http://www.w3.org/2000/svg"
-      className={classes}
-    >
-      <path
-        d="M21.533 7.11169C21.5482 7.32488 21.5482 7.53811 21.5482 7.7513C21.5482 14.2538 16.599 21.7462 7.5533 21.7462C4.76648 21.7462 2.17767 20.9391 0 19.5381C0.395953 19.5838 0.776625 19.599 1.18781 19.599C3.48727 19.599 5.60405 18.8224 7.29441 17.4975C5.13197 17.4518 3.31978 16.0356 2.69541 14.0863C3 14.132 3.30455 14.1624 3.62437 14.1624C4.06598 14.1624 4.50764 14.1015 4.91878 13.995C2.66498 13.5381 0.974578 11.5584 0.974578 9.16753V9.10664C1.62937 9.47213 2.39086 9.70055 3.19791 9.73097C1.87303 8.8477 1.00505 7.34011 1.00505 5.63452C1.00505 4.72083 1.24866 3.88327 1.67508 3.1523C4.09641 6.13706 7.73602 8.08627 11.8172 8.2995C11.7411 7.93402 11.6954 7.55335 11.6954 7.17263C11.6954 4.46194 13.8883 2.25385 16.6141 2.25385C18.0304 2.25385 19.3095 2.84775 20.208 3.80714C21.3197 3.59395 22.3857 3.18277 23.3299 2.61933C22.9643 3.76149 22.1877 4.72088 21.1674 5.32997C22.1573 5.22342 23.1167 4.94925 23.9999 4.56858C23.33 5.54316 22.4924 6.41114 21.533 7.11169Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-export default TwitterIcon;
+import React from "react";
+
+interface TwitterIconProps {
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  className?: string;
+  color?: string;
+}
+
+const TwitterIcon: React.FC<TwitterIconProps> = ({
+  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"
+      xmlns="http://www.w3.org/2000/svg"
+      className={classes}
+    >
+      <path
+        d="M21.533 7.11169C21.5482 7.32488 21.5482 7.53811 21.5482 7.7513C21.5482 14.2538 16.599 21.7462 7.5533 21.7462C4.76648 21.7462 2.17767 20.9391 0 19.5381C0.395953 19.5838 0.776625 19.599 1.18781 19.599C3.48727 19.599 5.60405 18.8224 7.29441 17.4975C5.13197 17.4518 3.31978 16.0356 2.69541 14.0863C3 14.132 3.30455 14.1624 3.62437 14.1624C4.06598 14.1624 4.50764 14.1015 4.91878 13.995C2.66498 13.5381 0.974578 11.5584 0.974578 9.16753V9.10664C1.62937 9.47213 2.39086 9.70055 3.19791 9.73097C1.87303 8.8477 1.00505 7.34011 1.00505 5.63452C1.00505 4.72083 1.24866 3.88327 1.67508 3.1523C4.09641 6.13706 7.73602 8.08627 11.8172 8.2995C11.7411 7.93402 11.6954 7.55335 11.6954 7.17263C11.6954 4.46194 13.8883 2.25385 16.6141 2.25385C18.0304 2.25385 19.3095 2.84775 20.208 3.80714C21.3197 3.59395 22.3857 3.18277 23.3299 2.61933C22.9643 3.76149 22.1877 4.72088 21.1674 5.32997C22.1573 5.22342 23.1167 4.94925 23.9999 4.56858C23.33 5.54316 22.4924 6.41114 21.533 7.11169Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default TwitterIcon;

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

@@ -1,37 +1,37 @@
-import React from 'react';
-
-interface UserProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-  color?: string;
-}
-
-const User: React.FC<UserProps> = ({
-  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" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M20 21V19A4 4 0 0 0 16 15H8A4 4 0 0 0 4 19V21" />
-      <circle cx="12" cy="7" r="4" />
-    </svg>
-  );
-};
-
-export default User;
+import React from 'react';
+
+interface UserProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const User: React.FC<UserProps> = ({
+  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" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M20 21V19A4 4 0 0 0 16 15H8A4 4 0 0 0 4 19V21" />
+      <circle cx="12" cy="7" r="4" />
+    </svg>
+  );
+};
+
+export default User;

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

@@ -1,63 +1,63 @@
-import React from 'react';
-
-interface UserIconProps {
-  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 UserIcon: React.FC<UserIconProps> = ({
-  size = 'md',
-  className = '',
-  color,
-  defaultColor = '#262626'
-}) => {
-  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: 8, height: 10 };
-      case 'sm': return { width: 9, height: 12 };
-      case 'md': return { width: 11, height: 14 };
-      case 'lg': return { width: 13, height: 16 };
-      case 'xl': return { width: 15, height: 18 };
-      default: return { width: 11, height: 14 };
-    }
-  };
-
-  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 11 14" 
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path 
-        d="M9.33301 12.75V11.417C9.33301 10.9087 9.13093 10.421 8.77148 10.0615C8.41213 9.70226 7.92513 9.50009 7.41699 9.5H3.41699C2.90866 9.5 2.42097 9.70208 2.06152 10.0615C1.70208 10.421 1.5 10.9087 1.5 11.417V12.75C1.5 13.1642 1.16421 13.5 0.75 13.5C0.335786 13.5 0 13.1642 0 12.75V11.417C0 10.5108 0.360227 9.64173 1.00098 9.00098C1.64173 8.36023 2.51084 8 3.41699 8H7.41699C8.32303 8.00009 9.19234 8.3603 9.83301 9.00098C10.4736 9.64169 10.833 10.511 10.833 11.417V12.75C10.833 13.1642 10.4972 13.5 10.083 13.5C9.66894 13.4998 9.33301 13.1641 9.33301 12.75ZM7.33301 3.41699C7.33301 2.35855 6.47539 1.50018 5.41699 1.5C4.35845 1.5 3.5 2.35845 3.5 3.41699C3.50018 4.47539 4.35855 5.33301 5.41699 5.33301C6.47528 5.33283 7.33283 4.47528 7.33301 3.41699ZM8.83301 3.41699C8.83283 5.30371 7.30371 6.83283 5.41699 6.83301C3.53013 6.83301 2.00018 5.30382 2 3.41699C2 1.53002 3.53002 0 5.41699 0C7.30382 0.000175741 8.83301 1.53013 8.83301 3.41699Z" 
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-export default UserIcon;
+import React from 'react';
+
+interface UserIconProps {
+  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 UserIcon: React.FC<UserIconProps> = ({
+  size = 'md',
+  className = '',
+  color,
+  defaultColor = '#262626'
+}) => {
+  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: 8, height: 10 };
+      case 'sm': return { width: 9, height: 12 };
+      case 'md': return { width: 11, height: 14 };
+      case 'lg': return { width: 13, height: 16 };
+      case 'xl': return { width: 15, height: 18 };
+      default: return { width: 11, height: 14 };
+    }
+  };
+
+  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 11 14" 
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path 
+        d="M9.33301 12.75V11.417C9.33301 10.9087 9.13093 10.421 8.77148 10.0615C8.41213 9.70226 7.92513 9.50009 7.41699 9.5H3.41699C2.90866 9.5 2.42097 9.70208 2.06152 10.0615C1.70208 10.421 1.5 10.9087 1.5 11.417V12.75C1.5 13.1642 1.16421 13.5 0.75 13.5C0.335786 13.5 0 13.1642 0 12.75V11.417C0 10.5108 0.360227 9.64173 1.00098 9.00098C1.64173 8.36023 2.51084 8 3.41699 8H7.41699C8.32303 8.00009 9.19234 8.3603 9.83301 9.00098C10.4736 9.64169 10.833 10.511 10.833 11.417V12.75C10.833 13.1642 10.4972 13.5 10.083 13.5C9.66894 13.4998 9.33301 13.1641 9.33301 12.75ZM7.33301 3.41699C7.33301 2.35855 6.47539 1.50018 5.41699 1.5C4.35845 1.5 3.5 2.35845 3.5 3.41699C3.50018 4.47539 4.35855 5.33301 5.41699 5.33301C6.47528 5.33283 7.33283 4.47528 7.33301 3.41699ZM8.83301 3.41699C8.83283 5.30371 7.30371 6.83283 5.41699 6.83301C3.53013 6.83301 2.00018 5.30382 2 3.41699C2 1.53002 3.53002 0 5.41699 0C7.30382 0.000175741 8.83301 1.53013 8.83301 3.41699Z" 
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default UserIcon;

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

@@ -1,50 +1,50 @@
-import React from "react";
-
-interface YouTubeIconProps {
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  className?: string;
-  color?: string;
-}
-
-const YouTubeIcon: React.FC<YouTubeIconProps> = ({
-  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"
-      xmlns="http://www.w3.org/2000/svg"
-      className={classes}
-    >
-      <path
-        d="M22.9024 6.50346C22.6407 5.51804 21.8696 4.74196 20.8906 4.47858C19.116 4 12.0001 4 12.0001 4C12.0001 4 4.88427 4 3.10965 4.47858C2.13061 4.742 1.35952 5.51804 1.09781 6.50346C0.622314 8.28958 0.622314 12.0162 0.622314 12.0162C0.622314 12.0162 0.622314 15.7427 1.09781 17.5289C1.35952 18.5143 2.13061 19.258 3.10965 19.5214C4.88427 20 12.0001 20 12.0001 20C12.0001 20 19.1159 20 20.8906 19.5214C21.8696 19.258 22.6407 18.5143 22.9024 17.5289C23.3779 15.7427 23.3779 12.0162 23.3779 12.0162C23.3779 12.0162 23.3779 8.28958 22.9024 6.50346ZM9.67282 15.3996V8.63271L15.6203 12.0162L9.67282 15.3996Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-export default YouTubeIcon;
+import React from "react";
+
+interface YouTubeIconProps {
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  className?: string;
+  color?: string;
+}
+
+const YouTubeIcon: React.FC<YouTubeIconProps> = ({
+  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"
+      xmlns="http://www.w3.org/2000/svg"
+      className={classes}
+    >
+      <path
+        d="M22.9024 6.50346C22.6407 5.51804 21.8696 4.74196 20.8906 4.47858C19.116 4 12.0001 4 12.0001 4C12.0001 4 4.88427 4 3.10965 4.47858C2.13061 4.742 1.35952 5.51804 1.09781 6.50346C0.622314 8.28958 0.622314 12.0162 0.622314 12.0162C0.622314 12.0162 0.622314 15.7427 1.09781 17.5289C1.35952 18.5143 2.13061 19.258 3.10965 19.5214C4.88427 20 12.0001 20 12.0001 20C12.0001 20 19.1159 20 20.8906 19.5214C21.8696 19.258 22.6407 18.5143 22.9024 17.5289C23.3779 15.7427 23.3779 12.0162 23.3779 12.0162C23.3779 12.0162 23.3779 8.28958 22.9024 6.50346ZM9.67282 15.3996V8.63271L15.6203 12.0162L9.67282 15.3996Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default YouTubeIcon;

package/src/components/atoms/Illustration/Illustration.tsx

@@ -1,28 +1,28 @@
-import React from 'react';
-
-export interface IllustrationProps
-  extends React.ImgHTMLAttributes<HTMLImageElement> {
-  /**
-   * Source of the illustration.
-   * This will typically be an imported SVG/PNG from the assets directory.
-   */
-  src: string;
-}
-
-/**
- * Generic Illustration atom.
- * It focuses on consistent rendering (responsive, block-level) while
- * letting the caller control which asset is used.
- */
-export const Illustration: React.FC<IllustrationProps> = ({
-  src,
-  className = '',
-  ...rest
-}) => {
-  const classes = ['illustration', className].filter(Boolean).join(' ');
-
-  return <img src={src} className={classes} {...rest} />;
-};
-
-
-
+import React from 'react';
+
+export interface IllustrationProps
+  extends React.ImgHTMLAttributes<HTMLImageElement> {
+  /**
+   * Source of the illustration.
+   * This will typically be an imported SVG/PNG from the assets directory.
+   */
+  src: string;
+}
+
+/**
+ * Generic Illustration atom.
+ * It focuses on consistent rendering (responsive, block-level) while
+ * letting the caller control which asset is used.
+ */
+export const Illustration: React.FC<IllustrationProps> = ({
+  src,
+  className = '',
+  ...rest
+}) => {
+  const classes = ['illustration', className].filter(Boolean).join(' ');
+
+  return <img src={src} className={classes} {...rest} />;
+};
+
+
+