@edge-zuq/core 1.2.7

package/src/presentation/components/atoms/UIIcon.tsx

@@ -0,0 +1,1091 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import Svg, { G, Mask, Path } from 'react-native-svg';
+
+import { theme } from '../../../theme';
+import React from 'react';
+
+export type IconName = keyof typeof icons;
+
+type IconProps = {
+  size?: number;
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+type Props = IconProps & {
+  name: IconName;
+};
+
+export const UIIcon = React.memo(({ name, ...props }: Props) => {
+  const IconComponent = icons[name];
+  return <IconComponent {...props} />;
+});
+
+const icons = {
+  'comment': IconComment,
+  'user': IconUser,
+  'password': IconPassword,
+  'exit': IconExit,
+  'play': IconPlay,
+  'eye': IconEye,
+  'eye-off': IconEyeOff,
+  'bell': IconBell,
+  'pin': IconPin,
+  'box': IconBox,
+  'truck': IconTruck,
+  'chevron-right': IconChevronRight,
+  'chevron-left': IconChevronLeft,
+  'home': IconHome,
+  'clock': IconClock,
+  'info': IconInfo,
+  'distance': IconDistance,
+  'calendar': IconCalendar,
+  'calendar-alt': IconCalendarAlt,
+  'truck-alt': IconTruckAlt,
+  'close': IconClose,
+  'pause': IconPause,
+  'later': IconLater,
+  'check': IconCheck,
+  'check-alt': IconCheckAlt,
+  'check-outlined': IconCheckOutlined,
+  'warning': IconWarning,
+  'warning-outline': IconWarningOutline,
+  'x-circle': IconXCircle,
+  'returned': IconReturned,
+  'waze': IconWaze,
+  'camera': IconCamera,
+  'battery': IconBattery,
+  'no-wifi': IconNoWifi,
+  'gallery': IconGallery,
+  'trash': IconTrash,
+  'gps': IconGPS,
+  'box-later': IconBoxLater,
+  'flash-on': IconFlashOn,
+  'flash-off': IconFlashOff,
+  'flash-auto': IconFlashAuto,
+  'flip-camera': IconFlipCamera,
+  'tool': IconTool,
+  'call': IconCall,
+  'block': IconBlock,
+  'search': IconSearch,
+  'add': IconAdd,
+  'pending': IconPending,
+  'settings': IconSettings,
+  'menu': IconMenu,
+  'number': IconNumber,
+  'edit': IconEdit,
+  'chevron-up': IconChevronUp,
+  'chevron-down': IconChevronDown,
+  'refresh': IconRefresh,
+  'qr-code': IconQRCode,
+  'barcode': IconBarCode,
+  'map': IconMap,
+};
+
+export const iconsNames = Object.keys(icons) as IconName[];
+
+function IconMap({
+  color = theme.color.brand.violet[500],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="m574-129-214-75-186 72q-10 4-19.5 2.5T137-136q-8-5-12.5-13.5T120-169v-561q0-13 7.5-23t20.5-15l186-63q6-2 12.5-3t13.5-1q7 0 13.5 1t12.5 3l214 75 186-72q10-4 19.5-2.5T823-824q8 5 12.5 13.5T840-791v561q0 13-7.5 23T812-192l-186 63q-6 2-12.5 3t-13.5 1q-7 0-13.5-1t-12.5-3Zm-14-89v-468l-160-56v468l160 56Zm80 0 120-40v-474l-120 46v468Zm-440-10 120-46v-468l-120 40v474Zm440-458v468-468Zm-320-56v468-468Z" />
+    </Svg>
+  );
+}
+
+function IconBarCode({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M40-200v-560h80v560H40Zm120 0v-560h80v560h-80Zm120 0v-560h40v560h-40Zm120 0v-560h80v560h-80Zm120 0v-560h120v560H520Zm160 0v-560h40v560h-40Zm120 0v-560h120v560H800Z" />
+    </Svg>
+  );
+}
+
+function IconQRCode({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M120-680q-17 0-28.5-11.5T80-720v-120q0-17 11.5-28.5T120-880h120q17 0 28.5 11.5T280-840q0 17-11.5 28.5T240-800h-80v80q0 17-11.5 28.5T120-680Zm0 600q-17 0-28.5-11.5T80-120v-120q0-17 11.5-28.5T120-280q17 0 28.5 11.5T160-240v80h80q17 0 28.5 11.5T280-120q0 17-11.5 28.5T240-80H120Zm600 0q-17 0-28.5-11.5T680-120q0-17 11.5-28.5T720-160h80v-80q0-17 11.5-28.5T840-280q17 0 28.5 11.5T880-240v120q0 17-11.5 28.5T840-80H720Zm120-600q-17 0-28.5-11.5T800-720v-80h-80q-17 0-28.5-11.5T680-840q0-17 11.5-28.5T720-880h120q17 0 28.5 11.5T880-840v120q0 17-11.5 28.5T840-680ZM700-200v-60h60v60h-60Zm0-120v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60-60v-60h60v60h-60Zm120-120v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60-60v-60h60v60h-60Zm40-140q-17 0-28.5-11.5T520-560v-160q0-17 11.5-28.5T560-760h160q17 0 28.5 11.5T760-720v160q0 17-11.5 28.5T720-520H560ZM240-200q-17 0-28.5-11.5T200-240v-160q0-17 11.5-28.5T240-440h160q17 0 28.5 11.5T440-400v160q0 17-11.5 28.5T400-200H240Zm0-320q-17 0-28.5-11.5T200-560v-160q0-17 11.5-28.5T240-760h160q17 0 28.5 11.5T440-720v160q0 17-11.5 28.5T400-520H240Zm20 260h120v-120H260v120Zm0-320h120v-120H260v120Zm320 0h120v-120H580v120Z" />
+    </Svg>
+  );
+}
+
+function IconRefresh({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-70q0-17 11.5-28.5T760-800q17 0 28.5 11.5T800-760v200q0 17-11.5 28.5T760-520H560q-17 0-28.5-11.5T520-560q0-17 11.5-28.5T560-600h128q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q68 0 124.5-34.5T692-367q8-14 22.5-19.5t29.5-.5q16 5 23 21t-1 30q-41 80-117 128t-169 48Z" />
+    </Svg>
+  );
+}
+
+function IconEdit({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M160-120q-17 0-28.5-11.5T120-160v-97q0-16 6-30.5t17-25.5l505-504q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L313-143q-11 11-25.5 17t-30.5 6h-97Zm544-528 56-56-56-56-56 56 56 56Z" />
+    </Svg>
+  );
+}
+
+function IconNumber({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="m360-320-33 131q-3 13-13 21t-24 8q-19 0-31-15t-7-33l28-112H171q-20 0-32-15.5t-7-34.5q3-14 14-22t25-8h129l40-160H231q-20 0-32-15.5t-7-34.5q3-14 14-22t25-8h129l33-131q3-13 13-21t24-8q19 0 31 15t7 33l-28 112h160l33-131q3-13 13-21t24-8q19 0 31 15t7 33l-28 112h109q20 0 32 15.5t7 34.5q-3 14-14 22t-25 8H660l-40 160h109q20 0 32 15.5t7 34.5q-3 14-14 22t-25 8H600l-33 131q-3 13-13 21t-24 8q-19 0-31-15t-7-33l28-112H360Zm20-80h160l40-160H420l-40 160Z" />
+    </Svg>
+  );
+}
+
+function IconMenu({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M160-240q-17 0-28.5-11.5T120-280q0-17 11.5-28.5T160-320h640q17 0 28.5 11.5T840-280q0 17-11.5 28.5T800-240H160Zm0-200q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520h640q17 0 28.5 11.5T840-480q0 17-11.5 28.5T800-440H160Zm0-200q-17 0-28.5-11.5T120-680q0-17 11.5-28.5T160-720h640q17 0 28.5 11.5T840-680q0 17-11.5 28.5T800-640H160Z" />
+    </Svg>
+  );
+}
+
+function IconSettings({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M433-80q-27 0-46.5-18T363-142l-9-66q-13-5-24.5-12T307-235l-62 26q-25 11-50 2t-39-32l-47-82q-14-23-8-49t27-43l53-40q-1-7-1-13.5v-27q0-6.5 1-13.5l-53-40q-21-17-27-43t8-49l47-82q14-23 39-32t50 2l62 26q11-8 23-15t24-12l9-66q4-26 23.5-44t46.5-18h94q27 0 46.5 18t23.5 44l9 66q13 5 24.5 12t22.5 15l62-26q25-11 50-2t39 32l47 82q14 23 8 49t-27 43l-53 40q1 7 1 13.5v27q0 6.5-2 13.5l53 40q21 17 27 43t-8 49l-48 82q-14 23-39 32t-50-2l-60-26q-11 8-23 15t-24 12l-9 66q-4 26-23.5 44T527-80h-94Zm49-260q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Z" />
+    </Svg>
+  );
+}
+
+function IconPending({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M280-420q25 0 42.5-17.5T340-480q0-25-17.5-42.5T280-540q-25 0-42.5 17.5T220-480q0 25 17.5 42.5T280-420Zm200 0q25 0 42.5-17.5T540-480q0-25-17.5-42.5T480-540q-25 0-42.5 17.5T420-480q0 25 17.5 42.5T480-420Zm200 0q25 0 42.5-17.5T740-480q0-25-17.5-42.5T680-540q-25 0-42.5 17.5T620-480q0 25 17.5 42.5T680-420ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" />
+    </Svg>
+  );
+}
+
+function IconAdd({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z" />
+    </Svg>
+  );
+}
+
+function IconSearch({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" />
+    </Svg>
+  );
+}
+
+function IconBlock({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z" />
+    </Svg>
+  );
+}
+
+function IconCall({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M798-120q-125 0-247-54.5T329-329Q229-429 174.5-551T120-798q0-18 12-30t30-12h162q14 0 25 9.5t13 22.5l26 140q2 16-1 27t-11 19l-97 98q20 37 47.5 71.5T387-386q31 31 65 57.5t72 48.5l94-94q9-9 23.5-13.5T670-390l138 28q14 4 23 14.5t9 23.5v162q0 18-12 30t-30 12Z" />
+    </Svg>
+  );
+}
+
+function IconTool({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M360-360q-100 0-170-70t-70-170q0-20 3-40t11-38q5-10 12.5-15t16.5-7q9-2 18.5.5T199-689l105 105 72-72-105-105q-8-8-10.5-17.5T260-797q2-9 7-16.5t15-12.5q18-8 38-11t40-3q100 0 170 70t70 170q0 23-4 43.5T584-516l202 200q29 29 29 71t-29 71q-29 29-71 29t-71-30L444-376q-20 8-40.5 12t-43.5 4Z" />
+    </Svg>
+  );
+}
+
+function IconFlipCamera({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M320-280q-33 0-56.5-23.5T240-360v-240q0-33 23.5-56.5T320-680h40l40-40h160l40 40h40q33 0 56.5 23.5T720-600v240q0 33-23.5 56.5T640-280H320Zm160-120q33 0 56.5-23.5T560-480q0-33-23.5-56.5T480-560q-33 0-56.5 23.5T400-480q0 33 23.5 56.5T480-400ZM342-940q34-11 68.5-15.5T480-960q94 0 177.5 33.5t148 93Q870-774 911-693.5T960-520h-80q-7-72-38-134.5T762.5-765Q714-813 651-842.5T516-878l62 62-56 56-180-180ZM618-20Q584-9 549.5-4.5T480 0q-94 0-177.5-33.5t-148-93Q90-186 49-266.5T0-440h80q8 72 38.5 134.5t79 110.5Q246-147 309-117.5T444-82l-62-62 56-56L618-20Z" />
+    </Svg>
+  );
+}
+
+function IconFlashAuto({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M200-80v-320H80v-480h400l-80 280h160L200-80Zm385-440 135-360h64l137 360h-62l-32-92H679l-32 92h-62Zm112-144h110l-53-150h-2l-55 150Z" />
+    </Svg>
+  );
+}
+
+function IconFlashOff({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M280-880h400l-80 280h160L643-431 280-794v-86ZM400-80v-320H280v-166L55-791l57-57 736 736-57 57-241-241L400-80Z" />
+    </Svg>
+  );
+}
+
+function IconFlashOn({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M400-80v-320H280v-480h400l-80 280h160L400-80Z" />
+    </Svg>
+  );
+}
+
+function IconBoxLater({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 15 15" fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M11.68 11.8v-1.342a.28.28 0 0 0-.088-.204.28.28 0 0 0-.408 0 .28.28 0 0 0-.088.204v1.327a.602.602 0 0 0 .175.423l.875.875a.28.28 0 0 0 .409 0 .28.28 0 0 0 0-.408l-.875-.875ZM7.888 8.329c.107 0 .209-.015.306-.044.097-.029.19-.068.277-.116l2.96-1.707a.539.539 0 0 0 .263-.357.587.587 0 0 0-.058-.445.536.536 0 0 0-.35-.262.572.572 0 0 0-.438.058l-2.96 1.706-2.96-1.706a.571.571 0 0 0-.438-.058.536.536 0 0 0-.35.262.564.564 0 0 0-.051.445c.044.16.134.28.27.357L7.304 8.17c.088.048.18.087.278.116.097.03.199.044.306.044Zm-5.25 1.823V5.514a1.136 1.136 0 0 1 .583-1.006L7.304 2.16c.098-.048.192-.087.285-.116a1.06 1.06 0 0 1 .605 0c.097.029.19.068.277.116l4.084 2.348a1.136 1.136 0 0 1 .583 1.006v1.984a.464.464 0 0 1-.219.408.533.533 0 0 1-.467.073 3.486 3.486 0 0 0-.517-.11 4.08 4.08 0 0 0-.547-.036c-1.128 0-2.09.399-2.888 1.196-.797.797-1.196 1.76-1.196 2.887v.3c0 .092.01.177.03.255.039.243-.032.432-.212.569a.48.48 0 0 1-.561.043l-3.34-1.925a1.136 1.136 0 0 1-.583-1.006Zm8.75 4.681a2.811 2.811 0 0 1-2.064-.853 2.811 2.811 0 0 1-.853-2.064c0-.806.285-1.494.853-2.063A2.811 2.811 0 0 1 11.388 9c.807 0 1.495.284 2.063.853.57.569.854 1.257.854 2.063 0 .807-.285 1.495-.854 2.064a2.811 2.811 0 0 1-2.063.853Z"
+      />
+    </Svg>
+  );
+}
+
+function IconGPS({ color = '#8C0C0C', size = 15, ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M9.45 14.517a.576.576 0 0 1-.525-.125.653.653 0 0 1-.225-.525c0-.156.053-.298.158-.425a.773.773 0 0 1 .392-.259c.278-.066.547-.152.808-.258.261-.106.514-.236.759-.392a.746.746 0 0 1 .475-.108c.172.017.314.08.425.192a.652.652 0 0 1 .208.533.584.584 0 0 1-.292.467 6.193 6.193 0 0 1-1.058.55 7.566 7.566 0 0 1-1.125.35Zm3.217-2.85a.664.664 0 0 1-.192-.417.667.667 0 0 1 .108-.45c.145-.245.273-.495.384-.75.11-.256.2-.528.266-.817a.8.8 0 0 1 .267-.4.664.664 0 0 1 .433-.166c.223 0 .398.077.525.233a.56.56 0 0 1 .109.533c-.09.4-.209.78-.359 1.142-.15.361-.336.703-.558 1.025a.587.587 0 0 1-.458.275.641.641 0 0 1-.525-.208Zm1.25-4.334a.632.632 0 0 1-.425-.166.82.82 0 0 1-.259-.4 4.933 4.933 0 0 0-.266-.825 5.484 5.484 0 0 0-.384-.742.667.667 0 0 1-.108-.45.664.664 0 0 1 .192-.417.667.667 0 0 1 .525-.216c.194.01.347.1.458.266.222.322.411.67.567 1.042.155.372.277.753.366 1.142.045.2 0 .377-.133.533a.667.667 0 0 1-.533.233ZM6.633 14.5c-1.522-.356-2.775-1.133-3.758-2.333C1.892 10.967 1.4 9.577 1.4 8c0-1.589.489-2.989 1.467-4.2a6.464 6.464 0 0 1 3.75-2.317.575.575 0 0 1 .525.125c.15.128.225.297.225.509a.651.651 0 0 1-.159.425.774.774 0 0 1-.391.258 5.222 5.222 0 0 0-2.934 1.883A5.19 5.19 0 0 0 2.733 8c0 1.244.384 2.342 1.15 3.292a5.447 5.447 0 0 0 2.934 1.891.755.755 0 0 1 .391.267.684.684 0 0 1 .159.433.62.62 0 0 1-.217.5.567.567 0 0 1-.517.117Zm4.234-11.017a6.572 6.572 0 0 0-.784-.408 4.867 4.867 0 0 0-.816-.275.82.82 0 0 1-.4-.258.633.633 0 0 1-.167-.425c0-.212.075-.38.225-.509a.576.576 0 0 1 .525-.125c.389.09.767.206 1.133.35.367.145.723.328 1.067.55a.584.584 0 0 1 .292.467.652.652 0 0 1-.209.533.696.696 0 0 1-.408.2.675.675 0 0 1-.458-.1ZM8.05 11.1a.814.814 0 0 1-.258-.042.524.524 0 0 1-.209-.125c-.733-.678-1.283-1.31-1.65-1.9-.366-.589-.55-1.133-.55-1.633 0-.778.253-1.428.759-1.95.505-.522 1.141-.783 1.908-.783.767 0 1.403.26 1.908.783.506.522.759 1.172.759 1.95 0 .5-.184 1.044-.55 1.633-.367.59-.917 1.223-1.65 1.9a.524.524 0 0 1-.209.125.814.814 0 0 1-.258.042Zm0-3.1c.2 0 .37-.07.508-.208a.692.692 0 0 0 .209-.509c0-.2-.07-.37-.209-.508a.692.692 0 0 0-.508-.208c-.2 0-.37.069-.508.208a.692.692 0 0 0-.209.508c0 .2.07.37.209.509A.692.692 0 0 0 8.05 8Z"
+      />
+    </Svg>
+  );
+}
+
+function IconTrash({
+  color = theme.color.feedback.red['500'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size + 1} height={size} fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M4.987 14c-.367 0-.681-.13-.942-.392a1.284 1.284 0 0 1-.392-.941V4h-.666V2.667H6.32V2h4v.667h3.333V4h-.667v8.667c0 .366-.13.68-.391.941a1.284 1.284 0 0 1-.942.392H4.987Zm6.666-10H4.987v8.667h6.666V4ZM6.32 11.333h1.333v-6H6.32v6Zm2.667 0h1.333v-6H8.987v6Z"
+      />
+    </Svg>
+  );
+}
+
+function IconGallery({
+  color = theme.color.feedback.green['500'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 -960 960 960"
+      fill={color}
+      {...props}
+    >
+      <Path d="M120-200q-33 0-56.5-23.5T40-280v-400q0-33 23.5-56.5T120-760h400q33 0 56.5 23.5T600-680v400q0 33-23.5 56.5T520-200H120Zm600-320q-17 0-28.5-11.5T680-560v-160q0-17 11.5-28.5T720-760h160q17 0 28.5 11.5T920-720v160q0 17-11.5 28.5T880-520H720Zm40-80h80v-80h-80v80ZM120-280h400v-400H120v400Zm40-80h320L375-500l-75 100-55-73-85 113Zm560 160q-17 0-28.5-11.5T680-240v-160q0-17 11.5-28.5T720-440h160q17 0 28.5 11.5T920-400v160q0 17-11.5 28.5T880-200H720Zm40-80h80v-80h-80v80Zm-640 0v-400 400Zm640-320v-80 80Zm0 320v-80 80Z" />
+    </Svg>
+  );
+}
+
+function IconCheckOutlined({
+  color = theme.color.feedback.green['500'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size + 1}
+      fill="none"
+      viewBox="0 0 80 81"
+      {...props}
+    >
+      <Path
+        fill={color}
+        d="m33.89 48.604-8.586-8.47c-.435-.436-.853-.669-1.252-.698-.4-.03-.847.202-1.342.697-.495.495-.742.947-.742 1.355 0 .409.247.86.742 1.355l8.9 8.9c.674.674 1.434 1.011 2.28 1.011.848 0 1.608-.337 2.282-1.01l20.939-20.94c.435-.435.668-.872.698-1.31.03-.439-.203-.905-.698-1.4-.495-.495-.927-.742-1.297-.742-.37 0-.802.247-1.297.742l-20.626 20.51ZM40.017 80.5c-5.479 0-10.65-1.04-15.513-3.12-4.863-2.081-9.122-4.947-12.775-8.596-3.653-3.65-6.521-7.904-8.604-12.763C1.04 51.163 0 45.994 0 40.516c0-5.556 1.04-10.747 3.12-15.571 2.081-4.825 4.947-9.064 8.596-12.717 3.65-3.653 7.904-6.521 12.763-8.604C29.337 1.541 34.506.5 39.984.5c5.556 0 10.747 1.04 15.571 3.12 4.825 2.081 9.064 4.947 12.717 8.596 3.653 3.65 6.521 7.885 8.604 12.705C78.959 29.74 80 34.928 80 40.484c0 5.479-1.04 10.65-3.12 15.513-2.081 4.864-4.947 9.122-8.596 12.775-3.65 3.653-7.885 6.521-12.705 8.604C50.76 79.46 45.571 80.5 40.016 80.5ZM40 76.78c10.078 0 18.643-3.528 25.698-10.582 7.054-7.055 10.581-15.62 10.581-25.698 0-10.078-3.527-18.643-10.581-25.698C58.643 7.748 50.078 4.221 40 4.221c-10.078 0-18.643 3.527-25.698 10.581C7.248 21.857 3.721 30.422 3.721 40.5c0 10.078 3.527 18.643 10.581 25.698C21.357 73.252 29.922 76.779 40 76.779Z"
+      />
+    </Svg>
+  );
+}
+
+function IconCheckAlt({
+  color = theme.color.neutral.light['00'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size + 1}
+      height={size}
+      fill="none"
+      viewBox="0 0 17 16"
+      {...props}
+    >
+      <Path
+        fill={color}
+        d="m6.65 10.1 5.65-5.65a.649.649 0 0 1 .475-.2c.184 0 .342.067.476.2.133.133.2.292.2.475a.649.649 0 0 1-.2.475l-6.134 6.133a.64.64 0 0 1-.466.2.64.64 0 0 1-.467-.2L3.317 8.667a.62.62 0 0 1-.191-.475.68.68 0 0 1 .208-.475.649.649 0 0 1 .475-.2c.183 0 .342.066.475.2L6.65 10.1Z"
+      />
+    </Svg>
+  );
+}
+
+function IconNoWifi({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg viewBox="0 0 24 24" width={size} height={size} fill="none" {...props}>
+      <Path
+        fill={color}
+        d="m10.575 19.575-9.05-9.05a1.934 1.934 0 0 1-.463-.7 1.964 1.964 0 0 1-.112-.8c.017-.283.075-.55.175-.8.1-.25.267-.467.5-.65C2.975 6.392 4.595 5.5 6.487 4.9 8.38 4.3 10.217 4 12 4c2.083 0 4.033.342 5.85 1.025 1.817.683 3.508 1.7 5.075 3.05.15.133.262.28.337.438.075.158.113.329.113.512s-.03.358-.088.525A1.186 1.186 0 0 1 23 10a5.34 5.34 0 0 0-1.738-1.45A4.756 4.756 0 0 0 19 8c-1.383 0-2.563.488-3.538 1.463C14.487 10.438 14 11.617 14 13c0 .817.183 1.57.55 2.262A5.34 5.34 0 0 0 16 17l-2.575 2.575a1.975 1.975 0 0 1-1.425.6 1.975 1.975 0 0 1-1.425-.6ZM19 20c-.283 0-.53-.104-.738-.313a1.009 1.009 0 0 1-.312-.737c0-.283.104-.53.312-.738.209-.208.455-.312.738-.312s.53.104.737.313c.209.208.313.454.313.737s-.104.53-.313.738A1.009 1.009 0 0 1 19 20Zm2.9-7.425c0 .383-.083.725-.25 1.025-.167.3-.483.683-.95 1.15a5.31 5.31 0 0 0-.613.7 1.459 1.459 0 0 0-.237.625c-.033.2-.13.37-.288.512a.784.784 0 0 1-.537.213.748.748 0 0 1-.55-.225.574.574 0 0 1-.175-.525c.05-.383.167-.717.35-1 .183-.283.492-.642.925-1.075.35-.35.575-.612.675-.787.1-.176.15-.396.15-.663 0-.3-.117-.563-.35-.787-.233-.226-.542-.338-.925-.338-.25 0-.492.058-.725.175a1.724 1.724 0 0 0-.6.5.993.993 0 0 1-.438.325.674.674 0 0 1-.537-.025.863.863 0 0 1-.413-.375.471.471 0 0 1 .013-.5 2.88 2.88 0 0 1 1.112-1.1 3.186 3.186 0 0 1 1.588-.4c.817 0 1.483.242 2 .725.517.483.775 1.1.775 1.85Z"
+      />
+    </Svg>
+  );
+}
+
+function IconBattery({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M5 17a.967.967 0 0 1-.713-.288A.968.968 0 0 1 4 16v-2H2v-4h2V8c0-.283.096-.52.287-.713A.968.968 0 0 1 5 7h16c.283 0 .52.096.712.287.192.192.288.43.288.713v8c0 .283-.096.52-.288.712A.968.968 0 0 1 21 17H5Zm1-2h13V9H6v6Z"
+      />
+    </Svg>
+  );
+}
+
+function IconCamera({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 25 25" fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M3.364 20.985c-.484 0-.904-.18-1.263-.538-.358-.358-.537-.779-.537-1.262v-10.8c0-.484.179-.904.537-1.263.359-.358.78-.537 1.263-.537h3l1.25-1.675c.183-.234.401-.413.654-.538.253-.125.518-.187.796-.187h5.4c.255 0 .468.086.641.257a.863.863 0 0 1 .259.637.88.88 0 0 1-.259.643.865.865 0 0 1-.641.263h-5.4l-1.8 2.4h-3.9v10.8h15.6v-8.7c0-.255.085-.469.257-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.865.865 0 0 1 .263.64v8.7c0 .484-.177.905-.529 1.263a1.72 1.72 0 0 1-1.271.538h-15.6Zm15.605-15h-.902a.875.875 0 0 1-.644-.259.87.87 0 0 1-.26-.641.87.87 0 0 1 .26-.641.875.875 0 0 1 .644-.26h.902v-.9a.87.87 0 0 1 .26-.64.871.871 0 0 1 .64-.26c.253 0 .466.087.637.26a.873.873 0 0 1 .258.64v.9h.894c.254 0 .468.087.643.258a.857.857 0 0 1 .263.637.87.87 0 0 1-.259.64.87.87 0 0 1-.641.26h-.9v.903c0 .256-.087.47-.259.643a.87.87 0 0 1-.641.26.865.865 0 0 1-.635-.259.87.87 0 0 1-.26-.641v-.9Zm-7.805 12c1.2 0 2.2-.409 3-1.225.8-.817 1.2-1.809 1.2-2.975 0-1.15-.4-2.138-1.2-2.963-.8-.825-1.8-1.237-3-1.237s-2.2.412-3 1.237c-.8.825-1.2 1.817-1.2 2.975 0 1.159.4 2.146 1.2 2.963.8.816 1.8 1.225 3 1.225Zm0-1.8c-.7 0-1.275-.235-1.725-.703-.45-.47-.675-1.043-.675-1.722 0-.665.225-1.227.675-1.687.45-.459 1.025-.688 1.725-.688.7 0 1.275.23 1.725.688.45.46.675 1.022.675 1.687 0 .679-.225 1.253-.675 1.722-.45.468-1.025.703-1.725.703Z"
+      />
+    </Svg>
+  );
+}
+
+function IconWaze({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg viewBox="0 0 122.71 122.88" width={size} height={size} {...props}>
+      <Path
+        fill="#fff"
+        d="M55.14 104.21c4.22 0 8.44.19 12.66-.09 3.84-.19 7.88-.56 11.63-1.5 29.82-7.31 45.76-40.23 32.72-68.07C104.27 17.76 90.77 8.19 72.3 6.22 58.14 4.72 45.48 8.94 34.79 18.5c-10.5 9.47-15.94 21.28-16.31 35.44-.09 3.28 0 6.66 0 9.94-.1 7.14-4.13 12.67-10.98 14.82-.09 0-.28.19-.38.19 2.63 6.94 13.31 17.16 19.97 19.69 8.36-11.44 25.23-7.4 28.05 5.63z"
+      />
+      <Path
+        fill={color}
+        d="M54.95 110.49c-1.03 4.69-3.56 8.16-7.69 10.31-5.25 2.72-10.6 2.63-15.57-.56-5.16-3.28-7.41-8.25-7.03-14.35.09-1.03-.19-1.41-1.03-1.88-9.1-4.78-16.31-11.44-21.28-20.44-.94-1.78-1.69-3.66-2.16-5.63-.66-2.72.38-4.03 3.19-4.31 3.38-.38 6.38-1.69 7.88-4.88.66-1.41 1.03-3.09 1.03-4.69.19-4.03 0-8.06.19-12.1 1.03-15.57 7.5-28.5 19.32-38.63C42.67 3.97 55.42-.43 69.76.03c25.04.94 46.51 18.57 51.57 43.23 4.59 22.32-2.34 40.98-20.07 55.51-1.03.84-2.16 1.69-3.38 2.44-.66.47-.84.84-.56 1.59 2.34 7.13-.94 15-7.5 18.38-8.91 4.41-19.22-.09-21.94-9.66-.09-.38-.56-.84-.84-.84-3.93-.28-7.97-.19-12.09-.19zm.19-6.28c4.22 0 8.44.19 12.66-.09 3.84-.19 7.88-.56 11.63-1.5 29.82-7.31 45.76-40.23 32.72-68.07C104.27 17.76 90.77 8.19 72.3 6.22 58.14 4.72 45.48 8.94 34.79 18.5c-10.5 9.47-15.94 21.28-16.31 35.44-.09 3.28 0 6.66 0 9.94-.1 7.14-4.13 12.67-10.98 14.82-.09 0-.28.19-.38.19 2.63 6.94 13.31 17.16 19.97 19.69 8.36-11.44 25.23-7.4 28.05 5.63z"
+      />
+      <Path
+        fill={color}
+        d="M74.92 79.74c-11.07-.56-18.38-4.97-23.07-13.78-1.13-2.16-.09-4.31 2.06-4.78 1.31-.28 2.53.66 3.47 2.16 1.22 1.88 2.44 3.75 4.03 5.25 8.81 8.34 23.25 5.72 28.79-5.06.66-1.31 1.5-2.34 3.09-2.34 2.34.09 3.66 2.44 2.63 4.59-2.91 5.91-7.5 10.22-13.69 12.28-2.72.93-5.53 1.3-7.31 1.68zM55.32 48.98c-3.38 0-6.09-2.72-6.09-6.09s2.72-6.09 6.09-6.09 6.09 2.72 6.09 6.09c.01 3.28-2.71 6.09-6.09 6.09zM98.27 42.79c0 3.38-2.72 6.09-6 6.19-3.38 0-6.09-2.63-6.09-6.09a6.15 6.15 0 0 1 6-6.19c3.28 0 5.99 2.72 6.09 6.09z"
+      />
+    </Svg>
+  );
+}
+
+function IconReturned({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 25 25" fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M6.408 12.72c0 .266.017.528.05.787.034.258.092.512.175.762.084.284.075.554-.025.813a.995.995 0 0 1-.525.562.904.904 0 0 1-.787.038.866.866 0 0 1-.513-.588 6.365 6.365 0 0 1-.287-1.175c-.059-.4-.088-.8-.088-1.2 0-2.233.775-4.133 2.325-5.7 1.55-1.566 3.442-2.35 5.675-2.35h.175l-.9-.9a.948.948 0 0 1-.275-.7c0-.283.092-.516.275-.7a.948.948 0 0 1 .7-.275c.284 0 .517.092.7.275l2.6 2.6c.2.2.3.434.3.7 0 .267-.1.5-.3.7l-2.6 2.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275.948.948 0 0 1-.275-.7c0-.283.092-.516.275-.7l.9-.9h-.175c-1.666 0-3.083.588-4.25 1.763-1.166 1.175-1.75 2.604-1.75 4.287Zm12-.1c0-.267-.017-.53-.05-.788a4.042 4.042 0 0 0-.175-.763 1.231 1.231 0 0 1 .025-.812.995.995 0 0 1 .525-.563.905.905 0 0 1 .788-.037c.258.108.429.304.512.587.133.384.23.775.288 1.175.058.4.087.8.087 1.2 0 2.234-.775 4.134-2.325 5.7-1.55 1.567-3.441 2.35-5.675 2.35h-.175l.9.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275l-2.6-2.6a.96.96 0 0 1-.3-.7c0-.266.1-.5.3-.7l2.6-2.6a.948.948 0 0 1 .7-.275c.284 0 .517.092.7.275a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7l-.9.9h.175c1.667 0 3.084-.587 4.25-1.762 1.167-1.175 1.75-2.604 1.75-4.288Z"
+      />
+    </Svg>
+  );
+}
+
+function IconXCircle({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} fill="none" viewBox="0 0 25 25" {...props}>
+      <Path
+        fill={color}
+        d="m12.408 14.07 2.9 2.9a.948.948 0 0 0 .7.274.948.948 0 0 0 .7-.275.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7l-2.9-2.9 2.9-2.9a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-2.9 2.9-2.9-2.9a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7c0 .284.092.517.275.7l2.9 2.9-2.9 2.9a.948.948 0 0 0-.275.7c0 .284.092.517.275.7a.948.948 0 0 0 .7.275.948.948 0 0 0 .7-.275l2.9-2.9Zm0 8.6a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.138c-.9-.9-1.612-1.958-2.137-3.175a9.738 9.738 0 0 1-.788-3.9c0-1.383.263-2.683.788-3.9a10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.959-1.612 3.175-2.137a9.738 9.738 0 0 1 3.9-.788c1.383 0 2.684.263 3.9.788a10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.959 2.138 3.175a9.738 9.738 0 0 1 .787 3.9 9.738 9.738 0 0 1-.787 3.9 10.098 10.098 0 0 1-2.138 3.175c-.9.9-1.958 1.613-3.175 2.138a9.738 9.738 0 0 1-3.9.787Z"
+      />
+    </Svg>
+  );
+}
+
+function IconWarning({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} fill="none" viewBox="0 0 25 25" {...props}>
+      <Path
+        fill={color}
+        d="M12.408 17.67c.284 0 .521-.097.713-.288a.968.968 0 0 0 .287-.713.968.968 0 0 0-.287-.712.968.968 0 0 0-.713-.288.968.968 0 0 0-.712.288.968.968 0 0 0-.288.712c0 .284.096.521.288.713.191.191.429.287.712.287Zm0-4c.284 0 .521-.097.713-.288a.968.968 0 0 0 .287-.713v-4a.967.967 0 0 0-.287-.712.968.968 0 0 0-.713-.288.968.968 0 0 0-.712.288.967.967 0 0 0-.288.712v4c0 .284.096.521.288.713.191.191.429.287.712.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.138c-.9-.9-1.612-1.958-2.137-3.175a9.738 9.738 0 0 1-.788-3.9c0-1.383.263-2.683.788-3.9a10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.959-1.612 3.175-2.137a9.738 9.738 0 0 1 3.9-.788c1.383 0 2.684.263 3.9.788a10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.959 2.138 3.175a9.738 9.738 0 0 1 .787 3.9 9.738 9.738 0 0 1-.787 3.9 10.098 10.098 0 0 1-2.138 3.175c-.9.9-1.958 1.613-3.175 2.138a9.738 9.738 0 0 1-3.9.787Z"
+      />
+    </Svg>
+  );
+}
+
+function IconWarningOutline({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+    </Svg>
+  );
+}
+
+function IconCheck({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} fill="none" viewBox="0 0 25 25" {...props}>
+      <Path
+        fill={color}
+        d="m11.008 14.47-2.15-2.15a.948.948 0 0 0-.7-.276.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7c0 .284.092.517.275.7l2.85 2.85c.2.2.434.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-4.95 4.95Zm1.4 8.2a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.138c-.9-.9-1.612-1.958-2.137-3.175a9.738 9.738 0 0 1-.788-3.9c0-1.383.263-2.683.788-3.9a10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.959-1.612 3.175-2.137a9.738 9.738 0 0 1 3.9-.788c1.383 0 2.684.263 3.9.788a10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.959 2.138 3.175a9.738 9.738 0 0 1 .787 3.9 9.738 9.738 0 0 1-.787 3.9 10.098 10.098 0 0 1-2.138 3.175c-.9.9-1.958 1.613-3.175 2.138a9.738 9.738 0 0 1-3.9.787Z"
+      />
+    </Svg>
+  );
+}
+
+function IconPause({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size + 1}
+      height={size}
+      fill="none"
+      viewBox="0 0 25 24"
+      {...props}
+    >
+      <Path
+        fill={color}
+        d="M10.148 16c.283 0 .52-.096.712-.287a.968.968 0 0 0 .288-.713V9a.967.967 0 0 0-.288-.713.967.967 0 0 0-.712-.287.968.968 0 0 0-.713.287.968.968 0 0 0-.287.713v6c0 .283.096.52.287.713.192.191.43.287.713.287Zm4 0c.283 0 .52-.096.712-.287a.968.968 0 0 0 .288-.713V9a.967.967 0 0 0-.288-.713.967.967 0 0 0-.712-.287.968.968 0 0 0-.713.287.968.968 0 0 0-.287.713v6c0 .283.096.52.287.713.192.191.43.287.713.287Zm-2 6a9.737 9.737 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.613-1.958-2.138-3.175a9.738 9.738 0 0 1-.787-3.9c0-1.383.262-2.683.787-3.9a10.099 10.099 0 0 1 2.138-3.175c.9-.9 1.958-1.612 3.175-2.137a9.737 9.737 0 0 1 3.9-.788c1.383 0 2.683.263 3.9.788a10.098 10.098 0 0 1 3.175 2.137c.9.9 1.612 1.958 2.137 3.175a9.738 9.738 0 0 1 .788 3.9 9.738 9.738 0 0 1-.788 3.9 10.097 10.097 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137a9.737 9.737 0 0 1-3.9.788Zm0-2c2.233 0 4.125-.775 5.675-2.325 1.55-1.55 2.325-3.442 2.325-5.675 0-2.233-.775-4.125-2.325-5.675C16.273 4.775 14.38 4 12.148 4c-2.233 0-4.125.775-5.675 2.325C4.923 7.875 4.148 9.767 4.148 12c0 2.233.775 4.125 2.325 5.675C8.023 19.225 9.915 20 12.148 20Z"
+      />
+    </Svg>
+  );
+}
+
+function IconTruckAlt({ size = 15, ...props }: IconProps) {
+  return (
+    <Svg
+      width={size + 1}
+      height={size}
+      fill="none"
+      viewBox="0 0 17 16"
+      {...props}
+    >
+      <Mask
+        id="a"
+        width={size + 1}
+        height={size}
+        x={0}
+        y={0}
+        maskUnits="userSpaceOnUse"
+      >
+        <Path fill="#D9D9D9" d="M.568 0h16v16h-16z" />
+      </Mask>
+      <G mask="url(#a)">
+        <Path
+          fill="#fff"
+          d="M4.568 13.333a1.929 1.929 0 0 1-1.417-.583 1.929 1.929 0 0 1-.583-1.417h-.667a.645.645 0 0 1-.475-.191.645.645 0 0 1-.191-.475V4c0-.367.13-.68.391-.942.262-.26.575-.391.942-.391h8c.367 0 .68.13.942.391.26.262.391.575.391.942v1.333h1.334a1.323 1.323 0 0 1 1.066.534l1.467 1.95a.59.59 0 0 1 .1.183.682.682 0 0 1 .033.217v2.45a.645.645 0 0 1-.191.475.645.645 0 0 1-.475.191h-.667c0 .556-.194 1.028-.583 1.417a1.928 1.928 0 0 1-1.417.583 1.929 1.929 0 0 1-1.417-.583 1.929 1.929 0 0 1-.583-1.417h-4c0 .556-.194 1.028-.583 1.417a1.929 1.929 0 0 1-1.417.583Zm0-1.333a.645.645 0 0 0 .475-.192.645.645 0 0 0 .192-.475.645.645 0 0 0-.192-.475.645.645 0 0 0-.475-.191.645.645 0 0 0-.475.191.645.645 0 0 0-.192.475c0 .19.064.348.192.475a.645.645 0 0 0 .475.192Zm-2-2h.533c.19-.2.406-.361.65-.483a1.8 1.8 0 0 1 .817-.184c.3 0 .572.062.817.184.244.122.46.283.65.483h4.533V4h-8v6Zm10 2a.645.645 0 0 0 .475-.192.645.645 0 0 0 .192-.475.645.645 0 0 0-.192-.475.645.645 0 0 0-.475-.191.645.645 0 0 0-.475.191.645.645 0 0 0-.192.475c0 .19.064.348.192.475a.645.645 0 0 0 .475.192Zm-.667-3.333h2.834l-1.5-2H11.9v2Z"
+        />
+      </G>
+    </Svg>
+  );
+}
+
+function IconCalendar({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 15 15" fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M8.57 10.67c-.408 0-.753-.142-1.035-.424a1.408 1.408 0 0 1-.423-1.035c0-.408.141-.754.423-1.035a1.408 1.408 0 0 1 1.036-.423c.408 0 .753.14 1.035.423.282.281.423.627.423 1.035 0 .408-.141.753-.423 1.035a1.408 1.408 0 0 1-1.035.423ZM3.03 13.002c-.321 0-.596-.115-.824-.343a1.123 1.123 0 0 1-.343-.824V3.669c0-.32.114-.595.343-.824.228-.228.503-.342.824-.342h.583v-.584c0-.165.056-.304.168-.415a.564.564 0 0 1 .416-.168c.165 0 .303.056.415.168.112.111.168.25.168.415v.584h4.667v-.584c0-.165.055-.304.167-.415a.564.564 0 0 1 .416-.168c.165 0 .304.056.415.168.112.111.168.25.168.415v.584h.583c.321 0 .596.114.825.342.228.229.342.503.342.824v8.167c0 .32-.114.595-.342.824a1.123 1.123 0 0 1-.825.343H3.03Zm0-1.167h8.166V6.003H3.03v5.833Z"
+      />
+    </Svg>
+  );
+}
+
+function IconCalendarAlt({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size + 1}
+      viewBox="0 0 14 15"
+      fill="none"
+      {...props}
+    >
+      <Path
+        fill={color}
+        d="M2.917 13.334c-.321 0-.596-.115-.824-.343a1.124 1.124 0 0 1-.343-.824V4c0-.32.114-.595.343-.824.228-.228.503-.342.824-.342H3.5V2.25c0-.165.056-.303.168-.415a.564.564 0 0 1 .415-.168c.166 0 .304.056.416.168.112.112.168.25.168.415v.584h4.666V2.25c0-.165.056-.303.168-.415a.564.564 0 0 1 .416-.168c.165 0 .303.056.415.168.112.112.168.25.168.415v.584h.583c.321 0 .596.114.824.342.229.229.343.503.343.824v8.167c0 .32-.114.595-.343.824a1.124 1.124 0 0 1-.824.343H2.917Zm0-1.167h8.166V6.334H2.917v5.833ZM7 8.667a.564.564 0 0 1-.416-.168.564.564 0 0 1-.167-.415c0-.166.056-.304.167-.416A.564.564 0 0 1 7 7.5c.165 0 .304.056.416.168.111.112.167.25.167.416a.564.564 0 0 1-.167.415.564.564 0 0 1-.416.168Zm-2.333 0a.564.564 0 0 1-.416-.168.564.564 0 0 1-.168-.415c0-.166.056-.304.168-.416a.564.564 0 0 1 .416-.168c.165 0 .303.056.415.168.112.112.168.25.168.416a.564.564 0 0 1-.168.415.564.564 0 0 1-.415.168Zm4.666 0a.564.564 0 0 1-.415-.168.564.564 0 0 1-.168-.415c0-.166.056-.304.168-.416a.564.564 0 0 1 .415-.168c.166 0 .304.056.416.168.112.112.168.25.168.416a.564.564 0 0 1-.168.415.564.564 0 0 1-.416.168ZM7 11a.564.564 0 0 1-.416-.167.564.564 0 0 1-.167-.416c0-.165.056-.304.167-.416A.564.564 0 0 1 7 9.834c.165 0 .304.056.416.167.111.112.167.25.167.416a.564.564 0 0 1-.167.416A.564.564 0 0 1 7 11Zm-2.333 0a.564.564 0 0 1-.416-.167.564.564 0 0 1-.168-.416c0-.165.056-.304.168-.416a.564.564 0 0 1 .416-.167c.165 0 .303.056.415.167.112.112.168.25.168.416a.564.564 0 0 1-.168.416.564.564 0 0 1-.415.167Zm4.666 0a.564.564 0 0 1-.415-.167.564.564 0 0 1-.168-.416c0-.165.056-.304.168-.416a.564.564 0 0 1 .415-.167c.166 0 .304.056.416.167.112.112.168.25.168.416a.564.564 0 0 1-.168.416.564.564 0 0 1-.416.167Z"
+      />
+    </Svg>
+  );
+}
+
+function IconDistance({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 15 15" fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M5.362 12.42a2.247 2.247 0 0 1-1.648-.686 2.247 2.247 0 0 1-.685-1.648V5.317a1.802 1.802 0 0 1-.839-.634 1.663 1.663 0 0 1-.328-1.014c0-.486.17-.9.51-1.24.34-.34.754-.51 1.24-.51s.9.17 1.24.51c.34.34.51.754.51 1.24 0 .38-.11.717-.328 1.014a1.802 1.802 0 0 1-.838.634v4.769c0 .32.114.595.342.824.229.228.503.342.824.342.321 0 .596-.114.824-.342.229-.229.343-.503.343-.824V4.253c0-.642.228-1.191.685-1.648a2.247 2.247 0 0 1 1.648-.686c.642 0 1.191.229 1.648.686.457.457.685 1.006.685 1.648V9.02c.34.127.62.338.84.635.218.296.327.634.327 1.013 0 .486-.17.9-.51 1.24-.34.34-.754.51-1.24.51s-.9-.17-1.24-.51c-.34-.34-.51-.754-.51-1.24 0-.379.11-.72.328-1.02.22-.302.499-.511.839-.628V4.253c0-.321-.114-.596-.343-.824a1.123 1.123 0 0 0-.824-.343c-.32 0-.595.114-.824.343a1.123 1.123 0 0 0-.342.824v5.833c0 .641-.229 1.19-.686 1.648a2.247 2.247 0 0 1-1.648.685Z"
+      />
+    </Svg>
+  );
+}
+
+function IconClock({
+  color = theme.color.neutral.mid['60'],
+  size = 15,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 15 15" fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M7.88 7.6V5.5a.564.564 0 0 0-.168-.416.564.564 0 0 0-.416-.167.564.564 0 0 0-.416.167.564.564 0 0 0-.167.416v2.319a.603.603 0 0 0 .175.423l1.925 1.925c.107.107.243.16.408.16a.553.553 0 0 0 .408-.16.553.553 0 0 0 .16-.409.553.553 0 0 0-.16-.408L7.88 7.6Zm-.584 6.067a5.681 5.681 0 0 1-2.275-.46 5.892 5.892 0 0 1-1.852-1.247 5.89 5.89 0 0 1-1.247-1.852 5.68 5.68 0 0 1-.46-2.275c0-.807.154-1.565.46-2.275A5.89 5.89 0 0 1 3.17 3.706 5.89 5.89 0 0 1 5.02 2.46 5.68 5.68 0 0 1 7.296 2a5.68 5.68 0 0 1 2.275.46c.71.306 1.327.721 1.852 1.246.525.525.94 1.143 1.247 1.852.306.71.46 1.468.46 2.275a5.68 5.68 0 0 1-.46 2.275 5.89 5.89 0 0 1-1.247 1.852 5.892 5.892 0 0 1-1.852 1.247c-.71.306-1.468.46-2.275.46Z"
+      />
+    </Svg>
+  );
+}
+
+function IconHome({
+  color = theme.color.neutral.mid['60'],
+  size = 24,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 25 24" fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M4.112 19v-9a1.986 1.986 0 0 1 .8-1.6l6-4.5c.35-.267.75-.4 1.2-.4.45 0 .85.133 1.2.4l6 4.5a1.987 1.987 0 0 1 .8 1.6v9c0 .55-.196 1.02-.587 1.413a1.926 1.926 0 0 1-1.413.587h-3a.967.967 0 0 1-.712-.288.968.968 0 0 1-.288-.712v-5a.968.968 0 0 0-.287-.713.968.968 0 0 0-.713-.287h-2a.967.967 0 0 0-.712.287.968.968 0 0 0-.288.713v5c0 .283-.096.52-.287.712a.967.967 0 0 1-.713.288h-3c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4.112 19Z"
+      />
+    </Svg>
+  );
+}
+
+function IconChevronUp({
+  color = theme.color.neutral.mid['60'],
+  size = 24,
+  style,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      style={[{ transform: [{ rotateZ: '90deg' }] }, style]}
+      {...props}
+    >
+      <Path d="m432-480 156 156q11 11 11 28t-11 28q-11 11-28 11t-28-11L348-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 28-11t28 11q11 11 11 28t-11 28L432-480Z" />
+    </Svg>
+  );
+}
+
+function IconChevronDown({
+  color = theme.color.neutral.mid['60'],
+  size = 24,
+  style,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      style={[{ transform: [{ rotateZ: '-90deg' }] }, style]}
+      {...props}
+    >
+      <Path d="m432-480 156 156q11 11 11 28t-11 28q-11 11-28 11t-28-11L348-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 28-11t28 11q11 11 11 28t-11 28L432-480Z" />
+    </Svg>
+  );
+}
+
+function IconChevronRight({
+  color = theme.color.neutral.mid['60'],
+  size = 24,
+  style,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      style={[{ transform: [{ rotateZ: '180deg' }] }, style]}
+      {...props}
+    >
+      <Path d="m432-480 156 156q11 11 11 28t-11 28q-11 11-28 11t-28-11L348-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 28-11t28 11q11 11 11 28t-11 28L432-480Z" />
+    </Svg>
+  );
+}
+
+function IconChevronLeft({
+  color = theme.color.neutral.mid['60'],
+  size = 24,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 -960 960 960"
+      {...props}
+    >
+      <Path d="m432-480 156 156q11 11 11 28t-11 28q-11 11-28 11t-28-11L348-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 28-11t28 11q11 11 11 28t-11 28L432-480Z" />
+    </Svg>
+  );
+}
+
+function IconTruck({
+  color = theme.color.neutral.mid['60'],
+  size = 24,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size + 1}
+      viewBox="0 0 28 29"
+      fill="none"
+      {...props}
+    >
+      <Path
+        fill={color}
+        d="M7.244 23.827c-.954 0-1.765-.334-2.432-1.002-.668-.668-1.002-1.479-1.002-2.432H2.665c-.324 0-.596-.11-.815-.33-.22-.219-.33-.49-.33-.815V7.8c0-.63.225-1.168.673-1.617a2.205 2.205 0 0 1 1.617-.672h13.736c.63 0 1.169.224 1.617.672.448.449.672.988.672 1.617v2.29h2.29c.362 0 .706.08 1.03.243.324.162.591.386.801.672l2.518 3.348c.077.096.134.2.172.315.038.115.057.239.057.372v4.207c0 .324-.11.596-.329.816-.22.219-.49.329-.815.329h-1.145c0 .953-.334 1.764-1.002 2.432-.667.668-1.478 1.002-2.432 1.002s-1.765-.334-2.432-1.002c-.668-.668-1.002-1.479-1.002-2.432h-6.868c0 .953-.334 1.764-1.002 2.432-.667.668-1.478 1.002-2.432 1.002Zm0-2.29c.324 0 .596-.11.816-.329.219-.22.329-.491.329-.815 0-.325-.11-.597-.33-.816-.219-.22-.49-.33-.815-.33-.324 0-.596.11-.815.33-.22.22-.33.491-.33.816 0 .324.11.596.33.815.219.22.49.33.815.33Zm13.736 0c.324 0 .596-.11.816-.329.219-.22.329-.491.329-.815 0-.325-.11-.597-.33-.816-.219-.22-.49-.33-.815-.33-.324 0-.596.11-.816.33-.219.22-.329.491-.329.816 0 .324.11.596.33.815.219.22.49.33.815.33Zm-1.145-5.723H24.7l-2.575-3.434h-2.29v3.434Z"
+      />
+    </Svg>
+  );
+}
+
+function IconPin({
+  color = theme.color.neutral.mid['60'],
+  size = 24,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 15 15" fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M7.112 12.609c-.136 0-.272-.024-.408-.073a1.074 1.074 0 0 1-.365-.219 22.802 22.802 0 0 1-1.677-1.706 12.642 12.642 0 0 1-1.217-1.612A7.673 7.673 0 0 1 2.7 7.497a4.133 4.133 0 0 1-.255-1.378c0-1.458.469-2.62 1.407-3.485.938-.865 2.025-1.298 3.26-1.298 1.234 0 2.32.433 3.259 1.298.938.865 1.407 2.027 1.407 3.485 0 .438-.085.897-.255 1.378-.17.482-.418.982-.744 1.502s-.732 1.058-1.218 1.612a22.803 22.803 0 0 1-1.677 1.706c-.107.097-.228.17-.364.219a1.208 1.208 0 0 1-.409.073Zm0-5.44c.321 0 .596-.114.824-.342.229-.229.343-.504.343-.824 0-.321-.114-.596-.343-.824a1.123 1.123 0 0 0-.824-.343c-.32 0-.595.114-.824.343a1.123 1.123 0 0 0-.342.824c0 .32.114.595.342.824.229.228.503.342.824.342Z"
+      />
+    </Svg>
+  );
+}
+
+function IconBox({
+  color = theme.color.neutral.mid['60'],
+  size = 24,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} fill="none" viewBox="0 0 15 15" {...props}>
+      <Path
+        fill={color}
+        d="M6.529 12.842V7.505L1.862 4.807v4.681a1.137 1.137 0 0 0 .584 1.006l4.083 2.348Zm1.167 0 4.083-2.348a1.138 1.138 0 0 0 .583-1.006V4.807L7.696 7.505v5.337Zm2.318-8.02 1.721-1.007-4.04-2.319a1.147 1.147 0 0 0-1.166 0l-1.152.657 4.637 2.668ZM7.112 6.497l1.736-.991-4.623-2.684-1.75 1.007 4.637 2.668Z"
+      />
+    </Svg>
+  );
+}
+
+function IconBell({
+  color = theme.color.neutral.mid['60'],
+  size = 24,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M5 19a.967.967 0 0 1-.713-.288A.968.968 0 0 1 4 18c0-.283.096-.52.287-.712A.967.967 0 0 1 5 17h1v-7c0-1.383.417-2.612 1.25-3.688.833-1.075 1.917-1.779 3.25-2.112v-.7c0-.417.146-.77.438-1.063A1.447 1.447 0 0 1 12 2c.417 0 .77.146 1.063.438.291.291.437.645.437 1.062v.7c1.333.333 2.417 1.037 3.25 2.112C17.583 7.388 18 8.617 18 10v7h1c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 19 19H5Zm7 3c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 10 20h4c0 .55-.196 1.02-.588 1.413A1.926 1.926 0 0 1 12 22Z"
+      />
+    </Svg>
+  );
+}
+
+function IconEye({
+  color = theme.color.neutral.mid['60'],
+  size = 24,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} fill="none" viewBox="0 0 25 25" {...props}>
+      <Path
+        fill={color}
+        d="M12.674 16.34c1.25 0 2.313-.438 3.188-1.313.874-.875 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188S13.925 7.34 12.675 7.34c-1.25 0-2.313.437-3.188 1.312S8.174 10.59 8.174 11.84c0 1.25.437 2.312 1.312 3.187s1.938 1.313 3.188 1.313Zm0-1.8c-.75 0-1.387-.263-1.912-.788a2.604 2.604 0 0 1-.788-1.912c0-.75.262-1.388.787-1.913a2.604 2.604 0 0 1 1.913-.787c.75 0 1.388.262 1.912.787.525.525.788 1.163.788 1.913s-.263 1.387-.788 1.912a2.604 2.604 0 0 1-1.912.788Zm0 4.8c-2.233 0-4.27-.6-6.113-1.8-1.841-1.2-3.295-2.783-4.362-4.75a1.907 1.907 0 0 1-.188-1.438c.042-.158.105-.312.188-.462 1.067-1.967 2.52-3.55 4.362-4.75 1.842-1.2 3.88-1.8 6.113-1.8 2.233 0 4.27.6 6.113 1.8 1.841 1.2 3.295 2.783 4.362 4.75a1.911 1.911 0 0 1 .188 1.438 1.998 1.998 0 0 1-.188.462c-1.067 1.967-2.52 3.55-4.363 4.75-1.841 1.2-3.879 1.8-6.112 1.8Z"
+      />
+    </Svg>
+  );
+}
+
+function IconEyeOff({
+  color = theme.color.neutral.mid['60'],
+  size = 24,
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 25 25" fill="none" {...props}>
+      <Path
+        fill={color}
+        d="m20.474 22.94-4.2-4.15a11.91 11.91 0 0 1-3.6.55c-2.233 0-4.275-.6-6.125-1.8a12.69 12.69 0 0 1-4.35-4.75 1.907 1.907 0 0 1-.188-1.438c.042-.158.105-.312.188-.462.367-.65.758-1.284 1.175-1.9.417-.617.9-1.167 1.45-1.65l-2.75-2.8 1.4-1.4 18.4 18.4-1.4 1.4Zm-7.8-6.6c.183 0 .358-.009.525-.025.167-.017.333-.05.5-.1l-5.4-5.4a2.66 2.66 0 0 0-.1.5 5.283 5.283 0 0 0-.025.525c0 1.25.437 2.312 1.312 3.187s1.938 1.313 3.188 1.313Zm7.3.45-3.175-3.15a5.34 5.34 0 0 0 .275-.875c.067-.3.1-.609.1-.925 0-1.25-.438-2.313-1.313-3.188S13.925 7.34 12.675 7.34a4.178 4.178 0 0 0-1.8.4l-2.55-2.55a11.51 11.51 0 0 1 4.35-.85c2.233 0 4.28.604 6.137 1.812a12.754 12.754 0 0 1 4.363 4.763c.083.133.146.279.188.437.041.159.062.321.062.488 0 .166-.017.329-.05.487a1.34 1.34 0 0 1-.175.438 14.2 14.2 0 0 1-1.388 2.2 9.77 9.77 0 0 1-1.837 1.825Zm-4.625-4.6-3-3c.433-.084.854-.05 1.262.1.409.15.755.383 1.038.7.283.3.488.641.613 1.025.124.383.154.775.087 1.175Z"
+      />
+    </Svg>
+  );
+}
+
+function IconPlay({
+  color = theme.color.neutral.mid['60'],
+  size = 24,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size + 1}
+      height={size}
+      fill="none"
+      viewBox="0 0 25 24"
+      {...props}
+    >
+      <Path
+        fill={color}
+        d="m11.39 15.75 4.875-3.125a.705.705 0 0 0 .35-.625.705.705 0 0 0-.35-.625L11.39 8.25a.688.688 0 0 0-.763-.037.705.705 0 0 0-.387.662v6.25c0 .3.129.52.387.662.259.142.513.13.763-.037ZM12.74 22a9.737 9.737 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.613-1.958-2.138-3.175A9.738 9.738 0 0 1 2.74 12c0-1.383.262-2.683.787-3.9a10.099 10.099 0 0 1 2.138-3.175c.9-.9 1.958-1.612 3.175-2.137A9.737 9.737 0 0 1 12.74 2c1.383 0 2.683.263 3.9.788a10.098 10.098 0 0 1 3.175 2.137c.9.9 1.612 1.958 2.137 3.175a9.738 9.738 0 0 1 .788 3.9 9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.959 1.613-3.175 2.137a9.737 9.737 0 0 1-3.9.788Zm0-2c2.233 0 4.125-.775 5.675-2.325 1.55-1.55 2.325-3.442 2.325-5.675 0-2.233-.775-4.125-2.325-5.675C16.865 4.775 14.973 4 12.74 4c-2.234 0-4.125.775-5.675 2.325C5.515 7.875 4.74 9.767 4.74 12c0 2.233.775 4.125 2.325 5.675C8.615 19.225 10.506 20 12.74 20Z"
+      />
+    </Svg>
+  );
+}
+
+function IconExit({
+  color = theme.color.neutral.mid['60'],
+  size = 24,
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      fill={color}
+      color={color}
+      viewBox="0 0 512 512"
+      {...props}
+    >
+      <Path d="M160 416H96c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h64c17.67 0 32-14.33 32-32s-14.3-32-32-32H96C42.98 32 0 74.98 0 128v256c0 53.02 42.98 96 96 96h64c17.67 0 32-14.33 32-32s-14.3-32-32-32zm342.6-182.6-128-128c-12.51-12.51-32.76-12.49-45.25 0-12.5 12.5-12.5 32.75 0 45.25L402.8 224H192c-17.7 0-32 14.3-32 32s14.31 32 32 32h210.8l-73.38 73.38c-12.5 12.5-12.5 32.75 0 45.25s32.75 12.5 45.25 0l128-128c12.43-12.53 12.43-32.73-.07-45.23z" />
+    </Svg>
+  );
+}
+
+function IconClose({ size = 24, color = '#555', ...props }: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size + 1}
+      fill="none"
+      viewBox="0 0 20 21"
+      {...props}
+    >
+      <Path
+        fill={color}
+        d="m10 11.836-4.083 4.083a.79.79 0 0 1-.584.23.79.79 0 0 1-.583-.23.79.79 0 0 1-.23-.583.79.79 0 0 1 .23-.584l4.083-4.083L4.75 6.586a.79.79 0 0 1-.23-.584.79.79 0 0 1 .23-.583.79.79 0 0 1 .583-.23.79.79 0 0 1 .584.23L10 9.502l4.083-4.083a.79.79 0 0 1 .584-.23.79.79 0 0 1 .583.23.79.79 0 0 1 .23.583.79.79 0 0 1-.23.584l-4.083 4.083 4.083 4.083a.79.79 0 0 1 .23.584.79.79 0 0 1-.23.583.79.79 0 0 1-.583.23.79.79 0 0 1-.584-.23L10 11.836Z"
+      />
+    </Svg>
+  );
+}
+
+function IconPassword({ size = 24, color = '#555', ...props }: IconProps) {
+  return (
+    <Svg width={size + 1} height={size} fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M6.68 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4.68 20V10c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6.68 8h1V6c0-1.383.488-2.563 1.463-3.538C10.118 1.487 11.297 1 12.68 1s2.563.488 3.538 1.462c.975.975 1.462 2.155 1.462 3.538v2h1c.55 0 1.021.196 1.413.588.391.391.587.862.587 1.412v10c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18.68 22h-12Zm6-5c.55 0 1.021-.196 1.413-.587.391-.392.587-.863.587-1.413s-.196-1.02-.587-1.412A1.926 1.926 0 0 0 12.68 13c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10.68 15c0 .55.196 1.02.588 1.413.391.391.862.587 1.412.587Zm-3-9h6V6c0-.833-.291-1.542-.875-2.125A2.893 2.893 0 0 0 12.68 3c-.833 0-1.541.292-2.125.875A2.893 2.893 0 0 0 9.68 6v2Z"
+      />
+    </Svg>
+  );
+}
+
+function IconUser({ size = 24, color = '#555', ...props }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 15 15" fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M7.112 7.17a2.247 2.247 0 0 1-1.648-.686 2.247 2.247 0 0 1-.685-1.648c0-.642.228-1.191.685-1.648a2.247 2.247 0 0 1 1.648-.686c.642 0 1.191.229 1.648.686.457.457.686 1.006.686 1.648 0 .641-.229 1.19-.686 1.648a2.247 2.247 0 0 1-1.648.685Zm-4.666 3.5v-.468c0-.33.085-.634.255-.911.17-.277.396-.489.678-.634a8.66 8.66 0 0 1 1.837-.679 8.026 8.026 0 0 1 3.792 0c.622.151 1.235.377 1.838.679.281.145.508.357.678.634.17.277.255.58.255.911v.467c0 .32-.114.596-.343.824a1.124 1.124 0 0 1-.824.343h-7c-.32 0-.595-.114-.824-.343a1.124 1.124 0 0 1-.342-.824Z"
+      />
+    </Svg>
+  );
+}
+
+function IconInfo({
+  size = 17,
+  color = theme.color.brand.violet['500'],
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} fill="none" viewBox="0 0 17 17" {...props}>
+      <Path
+        fill={color}
+        d="M11.877 13.833a.32.32 0 0 0 .234-.1.32.32 0 0 0 .1-.233v-2a.32.32 0 0 0-.1-.233.32.32 0 0 0-.467 0 .32.32 0 0 0-.1.233v2a.32.32 0 0 0 .1.233.32.32 0 0 0 .233.1Zm0-3.333a.32.32 0 0 0 .234-.1.32.32 0 0 0 0-.467.32.32 0 0 0-.467 0 .32.32 0 0 0 0 .467.32.32 0 0 0 .233.1Zm-6-.667h1.667a.645.645 0 0 0 .475-.191.645.645 0 0 0 .192-.475.645.645 0 0 0-.192-.475.645.645 0 0 0-.475-.192H5.878a.645.645 0 0 0-.475.192.645.645 0 0 0-.192.475c0 .188.064.347.192.475a.645.645 0 0 0 .475.191Zm0 2.667h.667a.645.645 0 0 0 .475-.192.645.645 0 0 0 .192-.475.645.645 0 0 0-.192-.475.645.645 0 0 0-.475-.191h-.666a.645.645 0 0 0-.475.191.645.645 0 0 0-.192.475c0 .19.064.348.192.475a.645.645 0 0 0 .475.192Zm-2 2.667c-.366 0-.68-.131-.941-.392a1.284 1.284 0 0 1-.392-.942V3.167c0-.367.13-.681.392-.942.261-.261.575-.392.942-.392H8.66a1.317 1.317 0 0 1 .933.384l3.234 3.233a1.318 1.318 0 0 1 .383.933V6.6a.645.645 0 0 1-.192.475.645.645 0 0 1-.475.192.645.645 0 0 1-.475-.192.645.645 0 0 1-.192-.475v-.1H9.211a.645.645 0 0 1-.475-.192.645.645 0 0 1-.192-.475V3.167H3.878v10.666H7.56c.189 0 .347.064.475.192a.645.645 0 0 1 .192.475.645.645 0 0 1-.192.475.645.645 0 0 1-.475.192H3.878Zm8-6.667c.923 0 1.709.325 2.359.975.65.65.975 1.436.975 2.358 0 .922-.325 1.709-.975 2.359-.65.65-1.436.975-2.359.975a3.213 3.213 0 0 1-2.358-.975 3.213 3.213 0 0 1-.975-2.359c0-.922.325-1.708.975-2.358a3.213 3.213 0 0 1 2.358-.975Z"
+      />
+    </Svg>
+  );
+}
+
+function IconComment({
+  size = 24,
+  color = theme.color.neutral.mid['60'],
+  ...props
+}: IconProps) {
+  return (
+    <Svg
+      width={size + 1}
+      height={size}
+      fill="none"
+      viewBox="0 0 25 24"
+      {...props}
+    >
+      <Path
+        fill={color}
+        d="m6.148 18-2.3 2.3c-.317.317-.68.387-1.088.212-.408-.175-.612-.487-.612-.937V4c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4.148 2h16c.55 0 1.02.196 1.412.587.392.392.588.863.588 1.413v12c0 .55-.196 1.02-.588 1.413a1.926 1.926 0 0 1-1.412.587h-14Zm-.85-2h14.85V4h-16v13.125L5.298 16Zm1.85-2h6c.283 0 .52-.096.712-.287a.968.968 0 0 0 .288-.713.968.968 0 0 0-.288-.713.967.967 0 0 0-.712-.287h-6a.967.967 0 0 0-.713.287.968.968 0 0 0-.287.713c0 .283.096.52.287.713.192.191.43.287.713.287Zm0-3h10c.283 0 .52-.096.712-.287a.968.968 0 0 0 .288-.713.967.967 0 0 0-.288-.713.967.967 0 0 0-.712-.287h-10a.968.968 0 0 0-.713.287.968.968 0 0 0-.287.713c0 .283.096.52.287.713.192.191.43.287.713.287Zm0-3h10c.283 0 .52-.096.712-.287A.967.967 0 0 0 18.148 7a.967.967 0 0 0-.288-.713.967.967 0 0 0-.712-.287h-10a.968.968 0 0 0-.713.287.968.968 0 0 0-.287.713c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+      />
+    </Svg>
+  );
+}
+
+function IconLater({
+  size = 24,
+  color = theme.color.neutral.mid['60'],
+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size + 1} height={size} fill="none" {...props}>
+      <Path
+        fill={color}
+        d="M9.74 18c-1.25 0-2.421-.238-3.513-.712a9.149 9.149 0 0 1-2.85-1.925 9.147 9.147 0 0 1-1.925-2.85A8.707 8.707 0 0 1 .74 9c0-1.25.237-2.42.712-3.513a9.148 9.148 0 0 1 1.925-2.85A9.148 9.148 0 0 1 6.227.713 8.707 8.707 0 0 1 9.74 0a8.93 8.93 0 0 1 3.887.875A8.732 8.732 0 0 1 16.74 3.35V2c0-.283.096-.52.287-.712A.968.968 0 0 1 17.74 1c.283 0 .52.096.712.288.192.191.288.429.288.712v4c0 .283-.096.52-.288.713A.967.967 0 0 1 17.74 7h-4a.968.968 0 0 1-.713-.287A.968.968 0 0 1 12.74 6c0-.283.096-.52.287-.713A.968.968 0 0 1 13.74 5h1.75a7.431 7.431 0 0 0-2.525-2.2A6.75 6.75 0 0 0 9.74 2c-1.95 0-3.604.68-4.963 2.037C3.42 5.396 2.74 7.05 2.74 9c0 1.95.679 3.604 2.037 4.963C6.136 15.32 7.79 16 9.74 16c1.583 0 3-.475 4.25-1.425 1.25-.95 2.075-2.175 2.475-3.675a1.04 1.04 0 0 1 .45-.6c.216-.133.458-.183.725-.15a.973.973 0 0 1 .675.362.741.741 0 0 1 .15.688c-.484 1.983-1.534 3.613-3.15 4.887C13.698 17.363 11.84 18 9.74 18Zm1-9.4 2.5 2.5a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.949.949 0 0 1-.7-.275l-2.8-2.8a.999.999 0 0 1-.225-.337 1.034 1.034 0 0 1-.075-.388V5c0-.283.096-.52.287-.713A.968.968 0 0 1 9.74 4c.283 0 .52.096.712.287.192.192.288.43.288.713v3.6Z"
+      />
+    </Svg>
+  );
+}