@cleartrip/ct-design-icons 4.0.0-SNAPSHOT-test.0 → 4.0.0-SNAPSHOT-reactnative.2

package/src/trainsNightIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface NightIconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+  selected?: boolean;
+}
+
+const NightIcon: React.FC<NightIconProps> = ({ width = 18, height = 14, color = '#1A1A1A', selected }) => {
+  const fillColor = selected ? '#3C6CE6' : color;
+
+  return (
+    <svg width={width} height={height} viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M2.213 13.675C2.35433 13.825 2.525 13.9 2.725 13.9H14.75C14.9667 13.9 15.146 13.825 15.288 13.675C15.4293 13.525 15.5 13.35 15.5 13.15C15.5 12.9333 15.4293 12.754 15.288 12.612C15.146 12.4707 14.975 12.4 14.775 12.4H2.75C2.53333 12.4 2.35433 12.4707 2.213 12.612C2.071 12.754 2 12.9333 2 13.15C2 13.35 2.071 13.525 2.213 13.675Z'
+        fill={fillColor}
+      />
+      <path
+        d='M0.213 10.787C0.354333 10.929 0.525 11 0.725 11H16.75C16.9667 11 17.146 10.929 17.288 10.787C17.4293 10.6457 17.5 10.4667 17.5 10.25C17.5 10.05 17.4293 9.875 17.288 9.725C17.146 9.575 16.975 9.5 16.775 9.5H0.75C0.533333 9.5 0.354333 9.575 0.213 9.725C0.0709998 9.875 0 10.05 0 10.25C0 10.4667 0.0709998 10.6457 0.213 10.787Z'
+        fill={fillColor}
+      />
+      <mask id='mask0_night' maskUnits='userSpaceOnUse' x='1' y='0' width='16' height='8'>
+        <rect x='1' y='0' width='15.5' height='8' fill='#D9D9D9' />
+      </mask>
+      <g mask='url(#mask0_night)'>
+        <path
+          d='M8.75 12.5C7.21667 12.5 5.91667 11.9667 4.85 10.9C3.78333 9.83333 3.25 8.53333 3.25 7C3.25 5.46667 3.78333 4.16667 4.85 3.1C5.91667 2.03333 7.21667 1.5 8.75 1.5C10.2833 1.5 11.5833 2.03333 12.65 3.1C13.7167 4.16667 14.25 5.46667 14.25 7C14.25 8.53333 13.7167 9.83333 12.65 10.9C11.5833 11.9667 10.2833 12.5 8.75 12.5ZM8.75 11C9.85 11 10.7917 10.6083 11.575 9.825C12.3583 9.04167 12.75 8.1 12.75 7C12.75 5.9 12.3583 4.95833 11.575 4.175C10.7917 3.39167 9.85 3 8.75 3C7.65 3 6.70833 3.39167 5.925 4.175C5.14167 4.95833 4.75 5.9 4.75 7C4.75 8.1 5.14167 9.04167 5.925 9.825C6.70833 10.6083 7.65 11 8.75 11Z'
+          fill={fillColor}
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default NightIcon;

package/src/trainsOfferIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface OfferProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+const OfferIcon: React.FC<OfferProps> = ({ width = 20, height = 20 }) => (
+  <svg width={width} height={height} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      d='M11.3447 2.56856C11.7207 2.24235 12.2793 2.24235 12.6553 2.56856L13.8066 3.56738C14.0386 3.76866 14.3502 3.85216 14.6518 3.79385L16.1482 3.50447C16.6369 3.40996 17.1207 3.6893 17.2833 4.1598L17.7809 5.60042C17.8811 5.89074 18.1093 6.11887 18.3996 6.21915L19.8402 6.71675C20.3107 6.87926 20.59 7.36309 20.4955 7.85182L20.2062 9.34823C20.1478 9.64979 20.2313 9.96142 20.4326 10.1934L21.4314 11.3447C21.7576 11.7207 21.7576 12.2793 21.4314 12.6553L20.4326 13.8066C20.2313 14.0386 20.1478 14.3502 20.2062 14.6518L20.4955 16.1482C20.59 16.6369 20.3107 17.1207 19.8402 17.2833L18.3996 17.7809C18.1093 17.8811 17.8811 18.1093 17.7809 18.3996L17.2833 19.8402C17.1207 20.3107 16.6369 20.59 16.1482 20.4955L14.6518 20.2062C14.3502 20.1478 14.0386 20.2313 13.8066 20.4326L12.6553 21.4314C12.2793 21.7576 11.7207 21.7576 11.3447 21.4314L10.1934 20.4326C9.96142 20.2313 9.64979 20.1478 9.34823 20.2062L7.85182 20.4955C7.36309 20.59 6.87926 20.3107 6.71675 19.8402L6.21915 18.3996C6.11887 18.1093 5.89074 17.8811 5.60042 17.7809L4.1598 17.2833C3.6893 17.1207 3.40996 16.6369 3.50447 16.1482L3.79385 14.6518C3.85216 14.3502 3.76866 14.0386 3.56738 13.8066L2.56856 12.6553C2.24235 12.2793 2.24235 11.7207 2.56856 11.3447L3.56738 10.1934C3.76866 9.96142 3.85216 9.64979 3.79385 9.34823L3.50447 7.85182C3.40996 7.36309 3.6893 6.87926 4.1598 6.71675L5.60042 6.21915C5.89074 6.11887 6.11887 5.89074 6.21915 5.60042L6.71675 4.1598C6.87926 3.6893 7.36309 3.40996 7.85182 3.50447L9.34823 3.79385C9.64979 3.85216 9.96142 3.76866 10.1934 3.56738L11.3447 2.56856Z'
+      fill='white'
+      stroke='#11A670'
+    />
+    <path d='M16 8L8 16' stroke='#11A670' strokeLinecap='round' strokeLinejoin='round' />
+    <path d='M9.04785 9.16211H9.07602' stroke='#11A670' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+    <path d='M15.0479 15.1621H15.076' stroke='#11A670' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+  </svg>
+);
+
+export default OfferIcon;

package/src/trainsPhoneIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface PhoneIconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+const PhoneIcon: React.FC<PhoneIconProps> = ({ width = 13, height = 13, color = '#1A1A1A' }) => (
+  <svg width={width} height={height} viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      d='M12.4759 9.48431V11.2908C12.4765 11.4585 12.4422 11.6245 12.375 11.7781C12.3078 11.9318 12.2093 12.0697 12.0857 12.1831C11.9621 12.2965 11.8162 12.3828 11.6574 12.4365C11.4985 12.4903 11.3302 12.5102 11.1631 12.4951C9.31019 12.2938 7.5303 11.6606 5.96649 10.6465C4.51157 9.72196 3.27804 8.48843 2.35352 7.03351C1.33586 5.46259 0.702543 3.67405 0.504888 1.81277C0.48984 1.64625 0.50963 1.47843 0.562996 1.31998C0.616363 1.16153 0.702138 1.01592 0.81486 0.892439C0.927581 0.768955 1.06478 0.670295 1.21772 0.60274C1.37066 0.535185 1.53599 0.500216 1.70319 0.500058H3.50967C3.80191 0.497182 4.08521 0.600667 4.30679 0.791223C4.52837 0.981779 4.67309 1.24641 4.714 1.53578C4.79024 2.11389 4.93165 2.68152 5.13551 3.22785C5.21653 3.44338 5.23406 3.67761 5.18603 3.9028C5.13801 4.12799 5.02643 4.33469 4.86454 4.49841L4.09979 5.26315C4.957 6.77069 6.20522 8.01891 7.71276 8.87612L8.4775 8.11138C8.64122 7.94948 8.84793 7.83791 9.07311 7.78988C9.2983 7.74185 9.53254 7.75939 9.74806 7.8404C10.2944 8.04427 10.862 8.18567 11.4401 8.26192C11.7326 8.30318 11.9998 8.45052 12.1908 8.6759C12.3817 8.90128 12.4832 9.18899 12.4759 9.48431Z'
+      stroke={color}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default PhoneIcon;

package/src/trainsRightArrow.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface RightArrowProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+const RightArrow: React.FC<RightArrowProps> = ({ width = 7, height = 12, color = '#1A1A1A' }) => (
+  <svg width={width} height={height} viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M1.02426 11.0243L6.02426 6.02426C6.25858 5.78995 6.25858 5.41005 6.02426 5.17574L1.02426 0.175736C0.78995 -0.0585787 0.410051 -0.0585787 0.175736 0.175736C-0.0585787 0.41005 -0.0585787 0.78995 0.175736 1.02426L4.75147 5.6L0.175736 10.1757C-0.0585787 10.4101 -0.0585787 10.7899 0.175736 11.0243C0.410051 11.2586 0.78995 11.2586 1.02426 11.0243Z'
+      fill={color}
+    />
+  </svg>
+);
+
+export default RightArrow;

package/src/trainsSearchIcon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface SearchIconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+const SearchIcon: React.FC<SearchIconProps> = ({ width = 24, height = 24, color = '#B3B3B3' }) => {
+  return (
+    <svg width={width} height={height} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <g clipPath='url(#clip0_6299_10686)'>
+        <path
+          d='M20 20L16.5463 16.5463M18.2222 11.1111C18.2222 15.0385 15.0385 18.2222 11.1111 18.2222C7.18375 18.2222 4 15.0385 4 11.1111C4 7.18375 7.18375 4 11.1111 4C15.0385 4 18.2222 7.18375 18.2222 11.1111Z'
+          stroke={color}
+          strokeLinecap='round'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_6299_10686'>
+          <rect width='24' height='24' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default SearchIcon;

package/src/trainsSourceIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface SourceIconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+const SourceIcon: React.FC<SourceIconProps> = ({ width = 24, height = 24, color = '#808080' }) => {
+  const lineColor = '#0F6BFF';
+  return (
+    <svg width={width} height={height} viewBox='0 0 24 24' fill='none'>
+      <path
+        d='M3 15H19C19.5304 15 20.0391 14.7893 20.4142 14.4142C20.7893 14.0391 21 13.5304 21 13C21 9.13 17.63 6 11 6H3V11H20.5M3 10V14M8 11V6M13 11V6.5'
+        stroke={color}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path d='M3 19H21' stroke={lineColor} strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+    </svg>
+  );
+};
+
+export default SourceIcon;

package/src/trainsSuccessBadgeIcon.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+interface SuccessBadgeIconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+const DEFAULT_BADGE_COLOR = '#11A056';
+const CHECKMARK_COLOR = 'white';
+
+const SuccessBadgeIcon: React.FC<SuccessBadgeIconProps> = ({
+  width = 56,
+  height = 56,
+  color = DEFAULT_BADGE_COLOR,
+}) => (
+  <svg width={width} height={height} viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      d='M26.6893 5.13713C27.4413 4.4847 28.5587 4.4847 29.3107 5.13713L32.4828 7.88925C32.9468 8.29181 33.5701 8.45882 34.1732 8.34218L38.2964 7.54484C39.2738 7.35582 40.2415 7.91449 40.5665 8.8555L41.9376 12.825C42.1381 13.4056 42.5944 13.8619 43.175 14.0624L47.1445 15.4335C48.0855 15.7585 48.6442 16.7262 48.4552 17.7036L47.6578 21.8268C47.5412 22.4299 47.7082 23.0532 48.1108 23.5172L50.8629 26.6893C51.5153 27.4413 51.5153 28.5587 50.8629 29.3107L48.1108 32.4828C47.7082 32.9468 47.5412 33.5701 47.6578 34.1732L48.4552 38.2964C48.6442 39.2738 48.0855 40.2415 47.1445 40.5665L43.175 41.9376C42.5944 42.1381 42.1381 42.5944 41.9376 43.175L40.5665 47.1445C40.2415 48.0855 39.2738 48.6442 38.2964 48.4552L34.1732 47.6578C33.5701 47.5412 32.9468 47.7082 32.4828 48.1108L29.3107 50.8629C28.5587 51.5153 27.4413 51.5153 26.6893 50.8629L23.5172 48.1108C23.0532 47.7082 22.4299 47.5412 21.8268 47.6578L17.7036 48.4552C16.7262 48.6442 15.7585 48.0855 15.4335 47.1445L14.0624 43.175C13.8619 42.5944 13.4056 42.1381 12.825 41.9376L8.8555 40.5665C7.91449 40.2415 7.35582 39.2738 7.54484 38.2964L8.34218 34.1732C8.45882 33.5701 8.29181 32.9468 7.88925 32.4828L5.13713 29.3107C4.4847 28.5587 4.4847 27.4413 5.13713 26.6893L7.88925 23.5172C8.29181 23.0532 8.45882 22.4299 8.34218 21.8268L7.54484 17.7036C7.35582 16.7262 7.91449 15.7585 8.8555 15.4335L12.825 14.0624C13.4056 13.8619 13.8619 13.4056 14.0624 12.825L15.4335 8.8555C15.7585 7.91449 16.7262 7.35582 17.7036 7.54484L21.8268 8.34218C22.4299 8.45882 23.0532 8.29181 23.5172 7.88925L26.6893 5.13713Z'
+      fill={color}
+      stroke={color}
+    />
+    <path
+      d='M36 23L25 34L20 29'
+      stroke={CHECKMARK_COLOR}
+      strokeWidth={3}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default SuccessBadgeIcon;

package/src/trainsSuccessIcon.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface SuccessIconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+const SuccessIcon: React.FC<SuccessIconProps> = ({ width = 48, height = 48, color = '#FFFFFF' }) => (
+  <svg width={width} height={height} viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path d='M18 24L22 28L30 20' stroke={color} strokeWidth={3} strokeLinecap='round' strokeLinejoin='round' />
+  </svg>
+);
+
+export default SuccessIcon;

package/src/trainsSwapIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface SwapIconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+const SwapIcon: React.FC<SwapIconProps> = ({ width = 24, height = 24, color = '#FF4F17' }) => {
+  return (
+    <svg width={width} height={height} viewBox='0 0 24 24' fill='none'>
+      <rect width={24} height={24} fill='white' />
+      <path d='M12.8336 17.8333L12.8336 6.16663' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M12.8333 6.16647L17 10.3331' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M10.333 6.16671L10.333 17.8334' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M10.3335 17.8335L6.16681 13.6668' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
+      <circle
+        cx='12'
+        cy='12'
+        r='10'
+        transform='rotate(90 12 12)'
+        stroke={color}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default SwapIcon;

package/src/trainsThumbsUpIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface ThumbsUpIconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+const ThumbsUpIcon: React.FC<ThumbsUpIconProps> = ({ width = 10, height = 9, color = '#FF4F17' }) => {
+  return (
+    <svg width={width} height={height} viewBox='0 0 10 9' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M9.21 3.415C9.17 3.29 9.1 3.18 9.01 3.085C8.92 2.99 8.81 2.91 8.69 2.86C8.57 2.81 8.44 2.785 8.31 2.785H5.875V1.555C5.875 1.35 5.83 1.145 5.745 0.955C5.665 0.765 5.54 0.595 5.39 0.45C5.235 0.305 5.055 0.195 4.86 0.115C4.66 0.04 4.45 0 4.235 0C4.14 0 4.05 0.06 4.01 0.145L2.345 3.75H0.535C0.38 3.75 0.24 3.83 0.145 3.945C0.05 4.055 0 4.205 0 4.345V7.655C0 7.8 0.05 7.945 0.145 8.06C0.24 8.175 0.38 8.25 0.535 8.25H7.785C8.015 8.25 8.235 8.175 8.405 8.03C8.58 7.885 8.695 7.685 8.725 7.465L9.245 3.8C9.25 3.76 9.25 3.725 9.25 3.685C9.25 3.595 9.24 3.505 9.21 3.415ZM2.25 7.75H0.54L0.53 7.74C0.53 7.74 0.5 7.695 0.5 7.655V4.345C0.5 4.31 0.515 4.28 0.53 4.26C0.535 4.26 0.54 4.25 0.54 4.25H2.25V7.75ZM8.23 7.395C8.215 7.49 8.165 7.58 8.085 7.645C8.005 7.71 7.9 7.75 7.785 7.75H2.75V4.065L4.39 0.51C4.49 0.525 4.585 0.55 4.675 0.585C4.815 0.635 4.94 0.715 5.045 0.815C5.15 0.915 5.235 1.03 5.29 1.155C5.345 1.285 5.375 1.42 5.375 1.555V3.035C5.375 3.17 5.485 3.285 5.625 3.285H8.31C8.375 3.285 8.435 3.295 8.495 3.32C8.555 3.345 8.605 3.38 8.645 3.425C8.685 3.47 8.715 3.52 8.735 3.57C8.75 3.625 8.755 3.68 8.75 3.735L8.23 7.395Z'
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default ThumbsUpIcon;

package/src/trainsTrain.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface TrainIconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+const Train: React.FC<TrainIconProps> = ({ width = 24, height = 24, color = '#11A056' }) => (
+  <svg width={width} height={height} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      d='M19.4725 14.9975V5.4075C19.4725 4.5475 18.9536 3.7775 18.1554 3.4575C14.1839 1.8475 9.79343 1.8475 5.82202 3.4575C5.02374 3.7775 4.50486 4.5375 4.50486 5.4075V14.9975C4.50486 16.3775 5.62245 17.4975 6.99947 17.4975H7.39861L4.6246 20.6675C4.44499 20.8775 4.46495 21.1875 4.6745 21.3775C4.7643 21.4575 4.88404 21.4975 5.00378 21.4975C5.14348 21.4975 5.28318 21.4375 5.38296 21.3275L6.11139 20.4975H17.8859L18.6144 21.3275C18.7141 21.4375 18.8538 21.4975 18.9935 21.4975C19.1133 21.4975 19.223 21.4575 19.3228 21.3775C19.5324 21.1975 19.5523 20.8775 19.3727 20.6675L16.6087 17.4975H17.0078C18.3849 17.4975 19.5024 16.3775 19.5024 14.9975H19.4725ZM5.50271 10.9975V5.9975H11.4898V10.9975H5.50271ZM9.49408 13.9975C9.49408 14.2775 9.39429 14.5175 9.2047 14.7075C9.01511 14.8975 8.77563 14.9975 8.49623 14.9975C8.21684 14.9975 7.97736 14.8975 7.78777 14.7075C7.59818 14.5175 7.49839 14.2775 7.49839 13.9975C7.49839 13.7175 7.59818 13.4775 7.78777 13.2875C7.97736 13.0975 8.21684 12.9975 8.49623 12.9975C8.77563 12.9975 9.01511 13.0975 9.2047 13.2875C9.39429 13.4775 9.49408 13.7175 9.49408 13.9975ZM16.9979 19.4975H6.97951L8.72574 17.4975H15.2616L17.0078 19.4975H16.9979ZM14.4833 13.9975C14.4833 13.7175 14.5831 13.4775 14.7727 13.2875C14.9623 13.0975 15.2017 12.9975 15.4811 12.9975C15.7605 12.9975 16 13.0975 16.1896 13.2875C16.3792 13.4775 16.479 13.7175 16.479 13.9975C16.479 14.2775 16.3792 14.5175 16.1896 14.7075C16 14.8975 15.7605 14.9975 15.4811 14.9975C15.2017 14.9975 14.9623 14.8975 14.7727 14.7075C14.5831 14.5175 14.4833 14.2775 14.4833 13.9975ZM12.4876 10.9975V5.9975H18.4747V10.9975H12.4876Z'
+      fill={color}
+    />
+  </svg>
+);
+
+export default Train;

package/src/trainsTrainIcon.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface TrainIconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+  /** When true, shows front-facing train with white headlights (focused state) */
+  filled?: boolean;
+}
+
+/** Front-facing train path (body + windows + tracks); headlights drawn separately in white */
+const FOCUSED_TRAIN_PATH =
+  'M16.2271 12.4979V4.50625C16.2271 3.78958 15.7947 3.14792 15.1294 2.88125C11.8199 1.53958 8.16117 1.53958 4.85166 2.88125C4.18643 3.14792 3.75403 3.78125 3.75403 4.50625V12.4979C3.75403 13.6479 4.68535 14.5813 5.83287 14.5813H6.16549L3.85382 17.2229C3.70414 17.3979 3.72077 17.6562 3.89539 17.8146C3.97023 17.8812 4.07002 17.9146 4.1698 17.9146C4.28622 17.9146 4.40263 17.8646 4.48578 17.7729L5.0928 17.0813H14.9049L15.5119 17.7729C15.5951 17.8646 15.7115 17.9146 15.8279 17.9146C15.9277 17.9146 16.0192 17.8812 16.1023 17.8146C16.277 17.6646 16.2936 17.3979 16.1439 17.2229L13.8406 14.5813H14.1732C15.3207 14.5813 16.252 13.6479 16.252 12.4979H16.2271ZM4.58557 9.16458V4.99792H9.57478V9.16458H4.58557ZM7.91171 11.6646C7.91171 11.8979 7.82856 12.0979 7.67057 12.2563C7.51257 12.4146 7.31301 12.4979 7.08018 12.4979C6.84735 12.4979 6.64778 12.4146 6.48978 12.2563C6.33179 12.0979 6.24864 11.8979 6.24864 11.6646C6.24864 11.4313 6.33179 11.2313 6.48978 11.0729C6.64778 10.9146 6.84735 10.8313 7.08018 10.8313C7.31301 10.8313 7.51257 10.9146 7.67057 11.0729C7.82856 11.2313 7.91171 11.4313 7.91171 11.6646ZM14.1649 16.2479H5.81624L7.27143 14.5813H12.718L14.1732 16.2479H14.1649ZM12.0694 11.6646C12.0694 11.4313 12.1525 11.2313 12.3105 11.0729C12.4685 10.9146 12.6681 10.8313 12.9009 10.8313C13.1338 10.8313 13.3333 10.9146 13.4913 11.0729C13.6493 11.2313 13.7325 11.4313 13.7325 11.6646C13.7325 11.8979 13.6493 12.0979 13.4913 12.2563C13.3333 12.4146 13.1338 12.4979 12.9009 12.4979C12.6681 12.4979 12.4685 12.4146 12.3105 12.2563C12.1525 12.0979 12.0694 11.8979 12.0694 11.6646ZM10.4063 9.16458V4.99792H15.3955V9.16458H10.4063Z';
+
+/** Side-view outline train (unfocused state) */
+const UNFOCUSED_TRAIN_PATH =
+  'M16.252 12.9125V4.9177C16.252 4.20076 15.8104 3.55884 15.152 3.29207C11.8437 1.95821 8.15202 1.95821 4.84369 3.29207C4.18536 3.55884 3.75202 4.20076 3.75202 4.9177V12.9125C3.75202 14.063 4.67702 14.9967 5.83536 14.9967H6.16036L3.85202 17.6394C3.70202 17.8144 3.71869 18.0812 3.89369 18.2313C4.06036 18.3813 4.32702 18.3647 4.47702 18.1896L5.08536 17.4977H14.9104L15.5187 18.1896C15.6687 18.3647 15.9354 18.3813 16.102 18.2313C16.277 18.0812 16.2937 17.8144 16.1437 17.6394L13.8354 14.9967H14.1687C15.3187 14.9967 16.252 14.063 16.252 12.9125ZM15.4187 9.16104H10.4187V5.8264H15.4187V9.16104ZM4.58536 4.9177C4.58536 4.54256 4.81036 4.20076 5.16036 4.05903C8.26036 2.80854 11.7354 2.80854 14.8437 4.05903C15.1854 4.20076 15.4187 4.54256 15.4187 4.9177V4.99273H4.58536V4.9177ZM4.58536 5.8264H9.58536V9.16104H4.58536V5.8264ZM14.1854 16.664H5.81036L7.26869 14.9967H12.727L14.1854 16.664ZM5.83536 14.163C5.14369 14.163 4.58536 13.6045 4.58536 12.9125V9.9947H15.4187V12.9125C15.4187 13.6045 14.852 14.163 14.1687 14.163H5.83536ZM12.9187 11.2452C12.677 11.2452 12.4854 11.3286 12.3187 11.4869C12.1604 11.6453 12.0854 11.8454 12.0854 12.0788C12.0854 12.3123 12.1604 12.5124 12.3187 12.6707C12.4854 12.8375 12.677 12.9125 12.9187 12.9125C13.1604 12.9125 13.3437 12.8375 13.5104 12.6707C13.677 12.504 13.752 12.3123 13.752 12.0788C13.752 11.8454 13.6687 11.6453 13.5104 11.4869C13.3437 11.3286 13.152 11.2452 12.9187 11.2452ZM6.48536 11.4869C6.65202 11.3286 6.84369 11.2452 7.08536 11.2452C7.31869 11.2452 7.51036 11.3286 7.67702 11.4869C7.83536 11.6453 7.91869 11.8454 7.91869 12.0788C7.91869 12.3123 7.84369 12.504 7.67702 12.6707C7.51036 12.8375 7.32702 12.9125 7.08536 12.9125C6.84369 12.9125 6.65202 12.8375 6.48536 12.6707C6.32702 12.5124 6.25202 12.3123 6.25202 12.0788C6.25202 11.8454 6.32702 11.6453 6.48536 11.4869Z';
+
+const TrainIcon: React.FC<TrainIconProps> = ({ width = 20, height = 20, color = '#808080', filled = false }) => {
+  if (filled) {
+    return (
+      <svg width={width} height={height} viewBox='0 0 20 20' fill='none'>
+        <path fillRule='evenodd' clipRule='evenodd' d={FOCUSED_TRAIN_PATH} fill={color} />
+        <circle cx='6.8' cy='12.35' r='0.5' fill='white' />
+        <circle cx='13.2' cy='12.35' r='0.5' fill='white' />
+      </svg>
+    );
+  }
+
+  return (
+    <svg width={width} height={height} viewBox='0 0 20 20' fill='none'>
+      <path fillRule='evenodd' clipRule='evenodd' d={UNFOCUSED_TRAIN_PATH} fill={color} />
+    </svg>
+  );
+};
+
+export default TrainIcon;

package/src/validTick.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ValidTick = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'>
+      <rect width='20' height='20' fill='#00B28A' rx='10'></rect>
+      <path fill='#fff' d='M8.497 13.611L5 10.056l.874-.889 2.623 2.667 5.629-5.723.874.89-6.503 6.61z'></path>
+    </svg>
+  );
+};
+
+export default ValidTick;

package/src/video.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Video = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'>
+      <mask
+        id='mask0_2627_1220'
+        style={{ maskType: 'alpha' }}
+        width='16'
+        height='16'
+        x='0'
+        y='0'
+        maskUnits='userSpaceOnUse'
+      >
+        <path fill='#D9D9D9' d='M0 0H16V16H0z'></path>
+      </mask>
+      <g mask='url(#mask0_2627_1220)'>
+        <path
+          fill='#fff'
+          d='M6.333 11L11 8 6.333 5v6zm-3.666 2.334c-.367 0-.68-.13-.942-.392A1.284 1.284 0 011.333 12V4c0-.366.13-.68.392-.941.261-.261.575-.392.942-.392h10.666c.367 0 .68.13.942.392.261.26.391.575.391.941v8c0 .367-.13.681-.39.942-.262.261-.576.392-.943.392H2.667zm0-1.334h10.666V4H2.667v8z'
+        ></path>
+      </g>
+    </svg>
+  );
+};
+
+export default Video;