mautourco-components 0.1.1

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "mautourco-components",
+  "version": "0.1.1",
+  "private": false,
+  "description": "Bibliothèque de composants Motorco pour le redesign",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/components",
+    "src/styles",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mautourco/motorco.git"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "motorco"
+  ],
+  "dependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.126",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "concurrently \"npm run watch-tokens\" \"react-scripts start\"",
+    "build": "react-scripts build && npm run build-storybook && npx cpx2 \"storybook-static/**\" build/storybook",
+    "build:package": "npm run build-tokens && tsc --build tsconfig.build.json",
+    "prepublishOnly": "npm run build:package",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "build-tokens": "style-dictionary build --config style-dictionary.config.js",
+    "watch-tokens": "nodemon --watch tokens --ext json --exec \"npm run build-tokens\"",
+    "storybook": "storybook dev -p 6006",
+    "storybook:dev": "concurrently \"npm run watch-tokens\" \"storybook dev -p 6006\"",
+    "build-storybook": "storybook build --output-dir storybook-static --webpack-stats-json"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/addon-onboarding": "^9.1.5",
+    "@storybook/preset-create-react-app": "^9.1.5",
+    "@storybook/react-webpack5": "^9.1.5",
+    "@tokens-studio/sd-transforms": "^2.0.1",
+    "autoprefixer": "^10.4.21",
+    "chokidar-cli": "^3.0.0",
+    "concurrently": "^9.2.1",
+    "cpx2": "^4.2.0",
+    "eslint-plugin-storybook": "^9.1.5",
+    "nodemon": "^3.1.10",
+    "postcss": "^8.5.6",
+    "prop-types": "^15.8.1",
+    "storybook": "^9.1.5",
+    "style-dictionary": "^5.0.4",
+    "tailwindcss": "^3.4.17",
+    "webpack": "^5.101.3"
+  }
+}

package/src/components/atoms/Avatar/Avatar.tsx

@@ -0,0 +1,60 @@
+// src/components/Avatar.tsx
+import React from "react";
+
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type AvatarShape = "circle" | "rounded";
+export type AvatarColor = "gray" | "blue" | "pink" | "orange" | "green";
+
+export interface AvatarProps {
+  src?: string;
+  alt?: string;
+  name?: string;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  color?: AvatarColor;
+  className?: string;
+}
+
+// styling is driven by semantic classnames defined in `src/styles/components/avatar.css`
+
+export const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt,
+  name,
+  size = "md",
+  shape = "circle",
+  color = "blue",
+  className = "",
+}) => {
+  const [error, setError] = React.useState(false);
+
+  const initial =
+    name?.charAt(0)?.toUpperCase() ??
+    alt?.charAt(0)?.toUpperCase() ??
+    "A";
+
+  const classes = [
+    'avatar',
+    `avatar--${size}`,
+    `avatar--${shape}`,
+    !src || error ? `avatar--${color}` : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={classes} aria-label={alt || name}>
+      {src && !error ? (
+        <img
+          src={src}
+          alt={alt || name}
+          className="avatar__img"
+          onError={() => setError(true)}
+        />
+      ) : (
+        <span className="avatar__initial">{initial}</span>
+      )}
+    </div>
+  );
+};

package/src/components/atoms/Button/Button.css

@@ -0,0 +1,200 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--component-button-spacing-sm-gap, 4rem) / 16);
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--border-radius-rounded-full, 9999rem) / 16);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  user-select: none;
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-weight: var(--font-weight-font-bold, 700);
+  font-size: calc(var(--font-size-text-sm, 14rem) / 16);
+  line-height: calc(var(--font-leading-leading-sm, 20) / 16 * 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem) / 16 * 1rem);
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    transform 0.15s ease-in-out,
+    opacity 0.2s ease-in-out;
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.button--sm {
+  padding: calc(var(--component-button-spacing-sm-padding-y, 8rem) / 16)
+    calc(var(--component-button-spacing-sm-padding-x, 12rem) / 16);
+  gap: calc(var(--component-button-spacing-sm-gap, 4rem) / 16);
+  font-size: calc(var(--font-size-text-sm, 14rem) / 16);
+  line-height: calc(var(--font-leading-leading-sm, 20) / 16 * 1rem);
+}
+
+.button--md {
+  padding: calc(var(--component-button-spacing-md-padding-y, 10rem) / 16)
+    calc(var(--component-button-spacing-md-padding-x, 14rem) / 16);
+  gap: calc(var(--component-button-spacing-md-gap, 10rem) / 16);
+  font-size: calc(var(--font-size-text-base, 16rem) / 16);
+  line-height: calc(var(--font-leading-leading-md, 24) / 16 * 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem) / 16 * 1rem);
+}
+
+.button--lg {
+  padding: calc(var(--component-button-spacing-lg-padding-y, 10rem) / 16)
+    calc(var(--component-button-spacing-lg-padding-x, 64rem) / 16);
+  gap: calc(var(--component-button-spacing-lg-gap, 6rem) / 16);
+  font-size: calc(var(--font-size-text-lg, 18rem) / 16);
+  line-height: calc(var(--font-leading-leading-md, 24) / 16 * 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem) / 16 * 1rem);
+}
+
+.button--xl {
+  padding: calc(var(--component-button-spacing-xl-padding-y, 12rem) / 16)
+    calc(var(--component-button-spacing-xl-padding-x, 16rem) / 16);
+  gap: calc(var(--component-button-spacing-xl-gap, 6rem) / 16);
+  font-size: calc(var(--font-size-text-base, 16rem) / 16);
+  line-height: calc(var(--font-leading-leading-md, 24) / 16 * 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem) / 16 * 1rem);
+}
+
+.button__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.button--primary {
+  background-color: var(--color-button-brand-background-primary-default, #fe8839);
+  color: var(--color-button-brand-foreground-primary-default, #ffffff);
+}
+
+.button--primary:hover:not(:disabled) {
+  background-color: var(--color-button-brand-background-primary-hover, #fc6613);
+}
+
+.button--primary:active:not(:disabled) {
+  background-color: var(--color-button-brand-background-primary-pressed, #ed4c09);
+}
+
+.button--primary:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 calc(2rem / 16)
+    var(--color-button-brand-background-primary-focused, #ed4c09);
+}
+
+.button--primary:disabled {
+  background-color: var(--color-button-brand-background-primary-disabled, #f5f5f5);
+  color: var(--color-button-brand-foreground-primary-disabled, #a3a3a3);
+}
+
+.button--secondary {
+  background-color: var(--color-button-brand-background-secondary-default, #0d9394);
+  color: var(--color-button-brand-foreground-secondary-default, #ffffff);
+}
+
+.button--outline-primary {
+  background-color: var(--component-button-color-outline-primary-background-default, #ffffff);
+  color: var(--component-button-color-outline-primary-foreground-default, #fe8839);
+  border: calc(var(--border-width-input, 1rem) / 16) solid
+    var(--component-button-color-outline-primary-border-default, #fe8839);
+}
+
+.button--outline-primary:hover:not(:disabled) {
+  background-color: var(--component-button-color-outline-primary-background-hover, #fff6ed);
+  border-color: var(--component-button-color-outline-primary-border-hover, #fc6613);
+}
+
+.button--outline-primary:active:not(:disabled) {
+  background-color: var(--component-button-color-outline-primary-background-pressed, #ffebd4);
+  border-color: var(--component-button-color-outline-primary-border-pressed, #ed4c09);
+}
+
+.button--outline-primary:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 calc(2rem / 16)
+    var(--component-button-color-outline-primary-background-focused, #ffebd4);
+}
+
+.button--outline-primary:disabled {
+  background-color: var(--component-button-color-outline-primary-background-disabled, #ffffff);
+  color: var(--component-button-color-outline-primary-foreground-disabled, #a3a3a3);
+  border-color: var(--component-button-color-outline-primary-border-default, #fe8839);
+}
+
+.button--outline-secondary {
+  background-color: var(--component-button-color-outline-secondary-background-default, #ffffff);
+  color: var(--component-button-color-outline-secondary-foreground-default, #0d9394);
+  border: calc(var(--border-width-input, 1rem) / 16) solid
+    var(
+      --component-button-color-outline-secondary-border-default,
+      var(--component-button-color-outline-secondary-foreground-default, #0d9394)
+    );
+}
+
+.button--outline-secondary:hover:not(:disabled) {
+  background-color: var(
+    --component-button-color-outline-secondary-background-hover,
+    var(--button-color-outline-secondary-background-hover, #f0fdfb)
+  );
+  border-color: var(
+    --component-button-color-outline-secondary-border-hover,
+    #0f7173
+  );
+}
+
+.button--outline-secondary:active:not(:disabled) {
+  background-color: var(
+    --component-button-color-outline-secondary-background-pressed,
+    var(--button-color-outline-secondary-background-pressed, #ccfbf6)
+  );
+  border-color: var(
+    --component-button-color-outline-secondary-border-pressed,
+    #115b5e
+  );
+}
+
+.button--outline-secondary:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 calc(2rem / 16)
+    var(--component-button-color-outline-secondary-background-focused, #ffffff);
+}
+
+.button--outline-secondary:disabled {
+  background-color: var(--component-button-color-outline-secondary-background-disabled, #ffffff);
+  color: var(--component-button-color-outline-secondary-foreground-disabled, #a3a3a3);
+  border-color: var(--component-button-color-outline-secondary-border-default, var(--component-button-color-outline-secondary-foreground-default, #0d9394));
+}
+
+.button--secondary:hover:not(:disabled) {
+  background-color: var(--color-button-brand-background-secondary-hover, #0f7173);
+}
+
+.button--secondary:active:not(:disabled) {
+  background-color: var(--color-button-brand-background-secondary-pressed, #042c2f);
+}
+
+.button--secondary:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 calc(2rem / 16)
+    var(--color-button-brand-background-secondary-focused, #042c2f);
+}
+
+.button--secondary:disabled {
+  background-color: var(--color-button-brand-background-secondary-disabled, #f5f5f5);
+  color: var(--color-button-brand-foreground-secondary-disabled, #a3a3a3);
+}
+

package/src/components/atoms/Button/Button.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import Icon, { IconName } from '../Icon/Icon';
+import './Button.css';
+
+export interface ButtonProps {
+  /** Variant du bouton */
+  variant?: 'primary' | 'secondary' | 'outline' | 'outline-primary' | 'outline-secondary';
+  /** Taille du bouton */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Contenu du bouton */
+  children: React.ReactNode;
+  /** Icône affichée avant le libellé */
+  leadingIcon?: IconName;
+  /** Icône affichée après le libellé */
+  trailingIcon?: IconName;
+  /** Taille des icônes */
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** État désactivé */
+  disabled?: boolean;
+  /** Handler de clic */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Type de bouton */
+  type?: 'button' | 'submit' | 'reset';
+  /** Classes CSS supplémentaires */
+  className?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'md',
+  children,
+  leadingIcon,
+  trailingIcon,
+  iconSize = 'sm',
+  disabled = false,
+  onClick,
+  type = 'button',
+  className = '',
+}) => {
+  const baseClasses = 'button';
+  const normalizedVariant =
+    variant === 'outline' ? 'outline-primary' : variant;
+  const variantClass = `button--${normalizedVariant}`;
+  const sizeClass = `button--${size}`;
+  const disabledClass = disabled ? 'button--disabled' : '';
+
+  const buttonClasses = [
+    baseClasses,
+    variantClass,
+    sizeClass,
+    disabledClass,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const hasLeadingIcon = Boolean(leadingIcon);
+  const hasTrailingIcon = Boolean(trailingIcon);
+
+  return (
+    <button
+      type={type}
+      className={buttonClasses}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {hasLeadingIcon && (
+        <span className="button__icon button__icon--leading">
+          <Icon name={leadingIcon!} size={iconSize} />
+        </span>
+      )}
+      <span className="button__label">{children}</span>
+      {hasTrailingIcon && (
+        <span className="button__icon button__icon--trailing">
+          <Icon name={trailingIcon!} size={iconSize} />
+        </span>
+      )}
+    </button>
+  );
+};
+
+export default Button;

package/src/components/atoms/Checkbox/Checkbox.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import Check from '../Icon/icons/Check';
+
+interface CheckboxProps {
+  checked?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  label?: string;
+  onChange?: (checked: boolean) => void;
+  className?: string;
+  id?: string;
+  leadingContent?: React.ReactNode;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  checked = false,
+  disabled = false,
+  error = false,
+  label,
+  onChange,
+  className = '',
+  id,
+  leadingContent
+}) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!disabled && onChange) {
+      onChange(e.target.checked);
+    }
+  };
+
+  const getStateClasses = () => {
+    if (disabled) return 'checkbox--disabled';
+    if (error) return 'checkbox--error';
+    if (checked) return 'checkbox--checked';
+    return 'checkbox--default';
+  };
+
+  const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+
+  return (
+    <div className={`checkbox-container ${getStateClasses()} ${className}`}>
+      <div className="checkbox-wrapper">
+        <input
+          type="checkbox"
+          id={checkboxId}
+          checked={checked}
+          disabled={disabled}
+          onChange={handleChange}
+          className="checkbox-input"
+        />
+        <label htmlFor={checkboxId} className="checkbox-label">
+          <div className="checkbox-box">
+            {checked && (
+              <Check size="sm" className="checkbox-icon" />
+            )}
+          </div>
+          {leadingContent && (
+            <span className="checkbox-leading">{leadingContent}</span>
+          )}
+          {label && (
+            <span className="checkbox-text">{label}</span>
+          )}
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default Checkbox;

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

@@ -0,0 +1,135 @@
+import React from "react";
+import Chevron from "./icons/Chevron";
+import Check from "./icons/Check";
+import Close from "./icons/Close";
+import Search from "./icons/Search";
+import User from "./icons/User";
+import UserIcon from "./icons/UserIcon";
+import CalendarIcon from "./icons/CalendarIcon";
+import ArrivalIcon from "./icons/ArrivalIcon";
+import DepartureIcon from "./icons/DepartureIcon";
+import MapPinIcon from "./icons/MapPinIcon";
+import DeleteIcon from "./icons/DeleteIcon";
+import EyeIcon from "./icons/EyeIcon";
+import InfoIcon from "./icons/InfoIcon";
+import CheckCircleIcon from "./icons/CheckCircleIcon";
+import StrollerIcon from "./icons/StrollerIcon";
+import ChevronDownIcon from "./icons/ChevronDownIcon";
+import CarIcon from "./icons/CarIcon";
+import MoreIcon from "./icons/MoreIcon";
+import Settings from "./icons/Settings";
+import MenuIcon from "./icons/MenuIcon";
+import MautourcoLogo from "./icons/MautoucoLogo";
+import YouTubeIcon from "./icons/Youtube";
+import FacebookIcon from "./icons/FacebookIcon";
+import TwitterIcon from "./icons/TwitterIcon";
+import LinkedInIcon from "./icons/LinkedInIcon";
+
+export type IconName =
+  | "chevron-down"
+  | "chevron-up"
+  | "chevron-left"
+  | "chevron-right"
+  | "check"
+  | "close"
+  | "search"
+  | "user"
+  | "user-icon"
+  | "calendar"
+  | "arrival"
+  | "departure"
+  | "map-pin"
+  | "delete"
+  | "eye"
+  | "info"
+  | "check-circle"
+  | "stroller"
+  | "chevron-down-new"
+  | "car"
+  | "more"
+  | "settings"
+  | "menu"
+  | "mautourcoLogo"
+  | "youtube"
+  | "facebook"
+  | "linkedin"
+  | "twitter";
+
+interface IconProps {
+  name: IconName;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  className?: string;
+  color?: string;
+}
+
+const Icon: React.FC<IconProps> = ({
+  name,
+  size = "md",
+  className = "",
+  color,
+}) => {
+  const iconProps = { size, className, color };
+
+  switch (name) {
+    case "chevron-down":
+      return <Chevron direction="down" {...iconProps} />;
+    case "chevron-up":
+      return <Chevron direction="up" {...iconProps} />;
+    case "chevron-left":
+      return <Chevron direction="left" {...iconProps} />;
+    case "chevron-right":
+      return <Chevron direction="right" {...iconProps} />;
+    case "check":
+      return <Check {...iconProps} />;
+    case "close":
+      return <Close {...iconProps} />;
+    case "search":
+      return <Search {...iconProps} />;
+    case "user":
+      return <User {...iconProps} />;
+    case "user-icon":
+      return <UserIcon {...iconProps} />;
+    case "calendar":
+      return <CalendarIcon {...iconProps} />;
+    case "arrival":
+      return <ArrivalIcon {...iconProps} />;
+    case "departure":
+      return <DepartureIcon {...iconProps} />;
+    case "map-pin":
+      return <MapPinIcon {...iconProps} />;
+    case "delete":
+      return <DeleteIcon {...iconProps} />;
+    case "eye":
+      return <EyeIcon {...iconProps} />;
+    case "info":
+      return <InfoIcon {...iconProps} />;
+    case "check-circle":
+      return <CheckCircleIcon {...iconProps} />;
+    case "stroller":
+      return <StrollerIcon {...iconProps} />;
+    case "chevron-down-new":
+      return <ChevronDownIcon {...iconProps} />;
+    case "car":
+      return <CarIcon {...iconProps} />;
+    case "more":
+      return <MoreIcon {...iconProps} />;
+    case "settings":
+      return <Settings {...iconProps} />;
+    case "menu":
+      return <MenuIcon {...iconProps} />;
+    case "mautourcoLogo":
+      return <MautourcoLogo {...iconProps} />;
+    case "youtube":
+      return <YouTubeIcon {...iconProps} />;
+    case "facebook":
+      return <FacebookIcon {...iconProps} />;
+    case "twitter":
+      return <TwitterIcon {...iconProps} />;
+    case "linkedin":
+      return <LinkedInIcon {...iconProps} />;
+    default:
+      return null;
+  }
+};
+
+export default Icon;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+
+interface ArrivalIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const ArrivalIcon: React.FC<ArrivalIconProps> = ({
+  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';
+    }
+  };
+
+  // Base viewBox covers both plane and baseline
+  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"
+    >
+      {/* Plane */}
+      <path
+        d="M8.61046 1.06519C8.82677 1.38315 8.95172 1.75476 8.96985 2.13883L9.14241 5.47813L9.1424 5.48576C9.1471 5.59416 9.18213 5.69947 9.24321 5.78917C9.30439 5.87888 9.38987 5.94968 9.48914 5.9937L9.49114 5.99458L12.3255 7.26408L12.5211 7.36061C12.9036 7.57143 13.2202 7.88435 13.4351 8.26453L13.5335 8.45952L13.5364 8.46603L13.8064 9.08336C13.9069 9.30978 13.9559 9.555 13.9504 9.80272C13.9449 10.0525 13.8835 10.2979 13.7713 10.5212C13.659 10.7447 13.498 10.9412 13.3006 11.0947C13.1057 11.2463 12.8793 11.3511 12.6385 11.4056L12.639 11.4078L12.0869 11.5361C11.5998 11.6497 11.0835 11.6092 10.6107 11.406L10.6027 11.4024L1.86857 7.52809C1.52107 7.3737 1.22329 7.12683 1.0067 6.81696C0.966794 6.77487 0.930689 6.72861 0.90107 6.67747L0.101396 5.29664C-0.0184861 5.08962 -0.0324841 4.83735 0.0638278 4.61837L1.26385 1.88991C1.43061 1.51075 1.87397 1.33858 2.25314 1.50534L3.00271 1.83502C3.30041 1.96515 3.56325 2.16333 3.77081 2.41331C3.92688 2.60133 4.04874 2.81484 4.13044 3.04381L4.19826 3.27689L4.20767 3.32492L4.22324 3.4186C4.2445 3.50286 4.28365 3.58156 4.3392 3.64852C4.39743 3.71867 4.4715 3.77429 4.55507 3.81073L4.56444 3.81438L4.63703 3.84678L6.13231 0.448073C6.21232 0.266158 6.36131 0.123199 6.54646 0.0510128C6.73183 -0.0211105 6.93952 -0.0165731 7.1216 0.0635088L7.73925 0.335162C8.09167 0.492892 8.39324 0.745985 8.61046 1.06519ZM7.37046 1.90915C7.32544 1.84298 7.26771 1.78679 7.20061 1.74427L5.70506 5.14573C5.62443 5.32903 5.47367 5.47215 5.28667 5.54378C5.09961 5.61541 4.89164 5.6095 4.70916 5.52691L3.95523 5.18434L3.9551 5.18572C3.65673 5.05555 3.39292 4.85703 3.18501 4.60655C2.9771 4.35603 2.83052 4.06025 2.75756 3.74297C2.75392 3.72716 2.75075 3.71096 2.74815 3.69494L2.73246 3.59501C2.71083 3.51301 2.67087 3.43671 2.61662 3.37134C2.55855 3.30146 2.48536 3.24566 2.40212 3.20925L2.39874 3.20825L2.33553 3.17949L1.59002 4.87453L2.1285 5.8046C2.15834 5.8393 2.18558 5.87656 2.20893 5.91679C2.27056 6.02298 2.36437 6.10671 2.47654 6.15663L11.2034 10.0268C11.377 10.1014 11.5654 10.1173 11.7461 10.0751L12.3068 9.94482C12.3334 9.93896 12.3585 9.92741 12.38 9.9107C12.4014 9.89403 12.4186 9.87241 12.4309 9.84816C12.4431 9.82382 12.4501 9.79678 12.4507 9.76955C12.4512 9.74235 12.4456 9.71519 12.4344 9.69037L12.4316 9.68386L12.1639 9.07092C12.0764 8.87771 11.92 8.72384 11.7255 8.63906L11.7189 8.63568L8.87855 7.36354C8.52458 7.20605 8.2213 6.95338 8.00322 6.63313C7.78468 6.3122 7.6599 5.93628 7.64347 5.54836L7.47164 2.21606L7.4714 2.21119C7.46656 2.10317 7.43127 1.99855 7.37046 1.90915Z"
+        fill="currentColor"
+      />
+      {/* Baseline */}
+      <path
+        d="M14.083 0C14.4972 0 14.833 0.335825 14.833 0.75C14.833 1.16421 14.4972 1.5 14.083 1.5H0.75C0.335786 1.5 0 1.16421 0 0.75C4.48366e-05 0.335825 0.335814 0 0.75 0H14.083Z"
+        transform="translate(0 13)"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default ArrivalIcon;