// Generated by orrery. Edit the diagram spec and re-render instead of editing this file.
import { type SVGProps, useId } from "react";

export default function OrderLifecycle(props: SVGProps<SVGSVGElement>) {
  const uid = useId().replace(/[^A-Za-z0-9_-]/g, "");
  return (
    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="474" height="1185" viewBox="0 0 474 1185" role="img" aria-labelledby={`${uid}-sdw-title ${uid}-sdw-desc`} fontFamily="'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace" {...props}>
      <title id={`${uid}-sdw-title`}>
        Order lifecycle
      </title>
      <desc id={`${uid}-sdw-desc`}>
        Order lifecycle. 10 components. Connections: to Created; Created to Paid (pay [card ok] / charge); Created to Created (edit / recalc total); Created to Cancelled (cancel / release stock); Paid to Packed (pick / print label); Paid to Refunded (cancel [not packed] / refund); Packed to Shipped (hand over / send tracking); Shipped to Delivered (deliver / notify buyer); Delivered to Refunded (return [within 30 days] / refund); Delivered to ; Cancelled to ; Refunded to .
      </desc>
      <defs>
        <linearGradient id={`${uid}-bg`} x1="0" y1="0" x2="0.34" y2="0.94">
          <stop offset="0" stopColor="#0e1a24" />
          <stop offset="0.6" stopColor="#0b1012" />
        </linearGradient>
        <pattern id={`${uid}-grid`} width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M0 0.5H20M0.5 0V20" fill="none" stroke="#ffffff" strokeOpacity="0.045" strokeWidth="1" />
        </pattern>
        <radialGradient id={`${uid}-wash`} gradientUnits="userSpaceOnUse" cx="167.5" cy="624.82" r="417.57">
          <stop offset="0" stopColor="#60a5fa" stopOpacity="0.12" />
          <stop offset="1" stopColor="#60a5fa" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="474" height="1185" fill={`url(#${uid}-bg)`} />
      <rect width="474" height="1185" fill={`url(#${uid}-grid)`} />
      <rect width="474" height="1185" fill={`url(#${uid}-wash)`} />
      <text fontSize="18" fontWeight="700" letterSpacing="1.08" fill="#dadbdb">
        <tspan x="28" y="42.89">
          ORDER LIFECYCLE
        </tspan>
      </text>
      <text fontSize="11.5" fontWeight="400" fill="#9d9fa0">
        <tspan x="28" y="65.25">
          UML state machine: transitions read event [guard] / action
        </tspan>
      </text>
      <g id={`${uid}-e-e1`}>
        <path d="M263 118 L263 165.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M259 160 L263 166 L267 160" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M263 118 L263 165.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.1629;0.215;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1629;0.1864;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M259 160 L263 166 L267 160" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.215;0.2385;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e2`}>
        <path d="M245 218 L245 225.5 Q245 233 237.5 233 L143 233 Q135 233 135 241 L135 334.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M131 329 L135 335 L139 329" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M245 218 L245 225.5 Q245 233 237.5 233 L143 233 Q135 233 135 241 L135 334.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.2463;0.3388;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2463;0.2698;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M131 329 L135 335 L139 329" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3388;0.3622;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e3`}>
        <path d="M303 166 L303 156 Q303 148 311 148 L327 148 Q335 148 335 156 L335 172 Q335 180 327 180 L317.5 180" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M323 176 L317 180 L323 184" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e4`}>
        <path d="M281 218 L281 334.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M277 329 L281 335 L285 329" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e5`}>
        <path d="M117 387 L117 394.5 Q117 402 109.5 402 L90 402 Q82 402 82 410 L82 508.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M78 503 L82 509 L86 503" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M117 387 L117 394.5 Q117 402 109.5 402 L90 402 Q82 402 82 410 L82 508.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.3701;0.434;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3701;0.3935;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M78 503 L82 509 L86 503" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.434;0.4575;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e6`}>
        <path d="M153 387 L153 394.5 Q153 402 160.5 402 L245 402 Q253 402 253 410 L253 990 Q253 998 245 998 L159 998 Q151 998 151 1006 L151 1030.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M147 1025 L151 1031 L155 1025" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e7`}>
        <path d="M82 561 L82 677.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M78 672 L82 678 L86 672" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M82 561 L82 677.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.4653;0.5174;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4653;0.4887;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M78 672 L82 678 L86 672" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5174;0.5409;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e8`}>
        <path d="M82 730 L82 846.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M78 841 L82 847 L86 841" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M82 730 L82 846.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.5487;0.6008;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5487;0.5721;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M78 841 L82 847 L86 841" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6008;0.6243;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e9`}>
        <path d="M100 899 L100 909.5 Q100 914 95.5 914 L95.5 914 Q91 914 91 918.5 L91 990 Q91 998 99 998 L107 998 Q115 998 115 1006 L115 1030.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M111 1025 L115 1031 L119 1025" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M100 899 L100 909.5 Q100 914 95.5 914 L95.5 914 Q91 914 91 918.5 L91 990 Q91 998 99 998 L107 998 Q115 998 115 1006 L115 1030.5" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.6321;0.6993;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6321;0.6556;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M111 1025 L115 1031 L119 1025" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6993;0.7228;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-e-e10`}>
        <path d="M64 899 L64 1131.13" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M60 1125.63 L64 1131.63 L68 1125.63" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e11`}>
        <path d="M281 387 L281 434.5" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M277 429 L281 435 L285 429" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g id={`${uid}-e-e12`}>
        <path d="M133 1083 L133 1090.5 Q133 1098 125.5 1098 L80 1098 Q72 1098 72 1106 L72 1131.13" fill="none" stroke="#ffffff" strokeOpacity="0.25" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M68 1125.63 L72 1131.63 L76 1125.63" fill="none" stroke="#ffffff" strokeOpacity="0.4" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M133 1083 L133 1090.5 Q133 1098 125.5 1098 L80 1098 Q72 1098 72 1106 L72 1131.13" fill="none" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1 1" strokeDashoffset="1" opacity="0">
          <animate attributeName="stroke-dashoffset" values="1;1;0;0" keyTimes="0;0.7306;0.7827;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7306;0.754;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <g opacity="0">
          <path d="M68 1125.63 L72 1131.63 L76 1125.63" fill="none" stroke="#60a5fa" strokeOpacity="0.7" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7827;0.8062;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e2`}>
        <rect x="140" y="266" width="133" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#979899" textAnchor="middle">
          <tspan x="206.73" y="279.25">
            PAY [CARD OK] / CHARGE
          </tspan>
        </text>
        <g opacity="0">
          <rect x="140" y="266" width="133" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#60a5fa" textAnchor="middle">
            <tspan x="206.73" y="279.25">
              PAY [CARD OK] / CHARGE
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2463;0.2698;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e3`}>
        <rect x="341.01" y="153.51" width="104" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="7.5" fontWeight="700" letterSpacing="0.45" fill="#979899" textAnchor="middle">
          <tspan x="393.24" y="166.67">
            EDIT / RECALC TOTAL
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e4`}>
        <rect x="286" y="266" width="132" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#979899" textAnchor="middle">
          <tspan x="352.23" y="279.25">
            CANCEL / RELEASE STOCK
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e5`}>
        <rect x="87" y="437.5" width="100" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#979899" textAnchor="middle">
          <tspan x="137.23" y="450.75">
            PICK / PRINT LABEL
          </tspan>
        </text>
        <g opacity="0">
          <rect x="87" y="437.5" width="100" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#60a5fa" textAnchor="middle">
            <tspan x="137.23" y="450.75">
              PICK / PRINT LABEL
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3701;0.3935;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e6`}>
        <rect x="258" y="686" width="128" height="36" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#979899" textAnchor="middle">
          <tspan x="322.23" y="697.75">
            CANCEL [NOT PACKED] /
          </tspan>
          <tspan x="322.23" y="715.75">
            REFUND
          </tspan>
        </text>
      </g>
      <g id={`${uid}-el-e7`}>
        <rect x="87" y="609" width="152" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#979899" textAnchor="middle">
          <tspan x="163.23" y="622.25">
            HAND OVER / SEND TRACKING
          </tspan>
        </text>
        <g opacity="0">
          <rect x="87" y="609" width="152" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#60a5fa" textAnchor="middle">
            <tspan x="163.23" y="622.25">
              HAND OVER / SEND TRACKING
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4653;0.4887;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e8`}>
        <rect x="87" y="778" width="125" height="21" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#979899" textAnchor="middle">
          <tspan x="149.73" y="791.25">
            DELIVER / NOTIFY BUYER
          </tspan>
        </text>
        <g opacity="0">
          <rect x="87" y="778" width="125" height="21" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#60a5fa" textAnchor="middle">
            <tspan x="149.73" y="791.25">
              DELIVER / NOTIFY BUYER
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5487;0.5721;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-el-e9`}>
        <rect x="96" y="947" width="143" height="36" rx="3" fill="#0b1012" stroke="#ffffff" strokeOpacity="0.1" strokeWidth="1" />
        <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#979899" textAnchor="middle">
          <tspan x="167.73" y="958.75">
            RETURN [WITHIN 30 DAYS] /
          </tspan>
          <tspan x="167.73" y="976.75">
            REFUND
          </tspan>
        </text>
        <g opacity="0">
          <rect x="96" y="947" width="143" height="36" rx="3" fill="#0b1012" stroke="#60a5fa" strokeOpacity="0.5" strokeWidth="1" />
          <text fontSize="7.75" fontWeight="700" letterSpacing="0.47" fill="#60a5fa" textAnchor="middle">
            <tspan x="167.73" y="958.75">
              RETURN [WITHIN 30 DAYS] /
            </tspan>
            <tspan x="167.73" y="976.75">
              REFUND
            </tspan>
          </text>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6321;0.6556;0.9;0.9235;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-n-start`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <circle cx="263" cy="107" r="11" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="263" cy="107" r="11" fill="#919394" stroke="none" />
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <circle cx="263" cy="107" r="11" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="263" cy="107" r="11" fill="#60a5fa" stroke="none" />
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0912;0.1147;0.9165;0.94;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-n-created`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="209" y="166" width="108" height="52" rx="12" />
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="209" y="166" width="108" height="52" rx="12" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0912;0.1147;0.9165;0.94;1" dur="7.673s" repeatCount="indefinite" />
        </g>
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="263.46" y="196.08">
            CREATED
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-paid`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="81" y="335" width="108" height="52" rx="12" />
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="81" y="335" width="108" height="52" rx="12" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0912;0.1147;0.9165;0.94;1" dur="7.673s" repeatCount="indefinite" />
        </g>
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="135.46" y="365.08">
            PAID
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-packed`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="28" y="509" width="108" height="52" rx="12" />
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="28" y="509" width="108" height="52" rx="12" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0912;0.1147;0.9165;0.94;1" dur="7.673s" repeatCount="indefinite" />
        </g>
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="82.46" y="539.08">
            PACKED
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-shipped`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="28" y="678" width="108" height="52" rx="12" />
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="28" y="678" width="108" height="52" rx="12" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0912;0.1147;0.9165;0.94;1" dur="7.673s" repeatCount="indefinite" />
        </g>
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="82.46" y="708.08">
            SHIPPED
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-delivered`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="28" y="847" width="108" height="52" rx="12" />
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="28" y="847" width="108" height="52" rx="12" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0912;0.1147;0.9165;0.94;1" dur="7.673s" repeatCount="indefinite" />
        </g>
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="82.46" y="877.08">
            DELIVERED
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-cancelled`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="227" y="335" width="108" height="52" rx="12" />
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="227" y="335" width="108" height="52" rx="12" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0912;0.1147;0.9165;0.94;1" dur="7.673s" repeatCount="indefinite" />
        </g>
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="281.46" y="365.08">
            CANCELLED
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-refunded`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <rect x="79" y="1031" width="108" height="52" rx="12" />
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <rect x="79" y="1031" width="108" height="52" rx="12" />
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0912;0.1147;0.9165;0.94;1" dur="7.673s" repeatCount="indefinite" />
        </g>
        <text fontSize="11.5" fontWeight="700" letterSpacing="0.92" fill="#9d9fa0" textAnchor="middle">
          <tspan x="133.47" y="1061.08">
            REFUNDED
          </tspan>
        </text>
      </g>
      <g id={`${uid}-n-end`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <circle cx="68" cy="1144" r="13" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="68" cy="1144" r="8" fill="#919394" stroke="none" />
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <circle cx="68" cy="1144" r="13" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="68" cy="1144" r="8" fill="#60a5fa" stroke="none" />
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0912;0.1147;0.9165;0.94;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-n-closed`}>
        <g fill="#0b1012" stroke="#ffffff" strokeOpacity="0.16" strokeWidth="1">
          <circle cx="281" cy="448" r="13" />
          <g fill="none" stroke="#919394" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="281" cy="448" r="8" fill="#919394" stroke="none" />
          </g>
        </g>
        <g opacity="0">
          <g fill="#60a5fa" fillOpacity="0.15" stroke="#60a5fa" strokeOpacity="0.65" strokeWidth="1">
            <circle cx="281" cy="448" r="13" />
            <g fill="none" stroke="#60a5fa" strokeWidth="1.25" strokeOpacity="1" fillOpacity="1" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="281" cy="448" r="8" fill="#60a5fa" stroke="none" />
            </g>
          </g>
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0912;0.1147;0.9165;0.94;1" dur="7.673s" repeatCount="indefinite" />
        </g>
      </g>
      <g id={`${uid}-story`}>
        <path d="M263 118 L263 165.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.5 2" strokeDashoffset="0.5" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.5;0.5;-0.5;-1;-1" keyTimes="0;0.1629;0.215;0.2411;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1629;0.1642;0.2411;0.2424;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M263 118 L263 165.5" dur="7.673s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.1629;0.215;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.1434;0.1629;0.2463;0.2659;1" dur="7.673s" repeatCount="indefinite" />
        </circle>
        <path d="M245 218 L245 225.5 Q245 233 237.5 233 L143 233 Q135 233 135 241 L135 334.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.11 2" strokeDashoffset="0.11" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.11;0.11;-0.89;-1;-1" keyTimes="0;0.2463;0.3388;0.3494;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2463;0.2476;0.3494;0.3507;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M245 218 L245 225.5 Q245 233 237.5 233 L143 233 Q135 233 135 241 L135 334.5" dur="7.673s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.2463;0.3388;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2268;0.2463;0.3701;0.3896;1" dur="7.673s" repeatCount="indefinite" />
        </circle>
        <circle r="2" fill="#60a5fa" opacity="0">
          <animateMotion path="M303 166 L303 156 Q303 148 311 148 L327 148 Q335 148 335 156 L335 172 Q335 180 327 180 L317.5 180" dur="7.673s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4418;0.4939;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4223;0.4418;0.4939;0.5135;1" dur="7.673s" repeatCount="indefinite" />
        </circle>
        <circle r="2" fill="#60a5fa" opacity="0">
          <animateMotion path="M281 218 L281 334.5" dur="7.673s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6278;0.6799;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6082;0.6278;0.6799;0.6994;1" dur="7.673s" repeatCount="indefinite" />
        </circle>
        <path d="M117 387 L117 394.5 Q117 402 109.5 402 L90 402 Q82 402 82 410 L82 508.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.17 2" strokeDashoffset="0.17" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.17;0.17;-0.83;-1;-1" keyTimes="0;0.3701;0.434;0.4446;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3701;0.3714;0.4446;0.4459;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M117 387 L117 394.5 Q117 402 109.5 402 L90 402 Q82 402 82 410 L82 508.5" dur="7.673s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.3701;0.434;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3505;0.3701;0.4653;0.4848;1" dur="7.673s" repeatCount="indefinite" />
        </circle>
        <path d="M82 561 L82 677.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.22 2" strokeDashoffset="0.22" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.22;0.22;-0.78;-1;-1" keyTimes="0;0.4653;0.5174;0.529;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4653;0.4666;0.529;0.5303;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M82 561 L82 677.5" dur="7.673s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.4653;0.5174;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.4457;0.4653;0.5487;0.5682;1" dur="7.673s" repeatCount="indefinite" />
        </circle>
        <path d="M82 730 L82 846.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.22 2" strokeDashoffset="0.22" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.22;0.22;-0.78;-1;-1" keyTimes="0;0.5487;0.6008;0.6124;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5487;0.55;0.6124;0.6138;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M82 730 L82 846.5" dur="7.673s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.5487;0.6008;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5291;0.5487;0.6321;0.6516;1" dur="7.673s" repeatCount="indefinite" />
        </circle>
        <path d="M100 899 L100 909.5 Q100 914 95.5 914 L95.5 914 Q91 914 91 918.5 L91 990 Q91 998 99 998 L107 998 Q115 998 115 1006 L115 1030.5" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.16 2" strokeDashoffset="0.16" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.16;0.16;-0.84;-1;-1" keyTimes="0;0.6321;0.6993;0.7099;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6321;0.6334;0.7099;0.7112;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M100 899 L100 909.5 Q100 914 95.5 914 L95.5 914 Q91 914 91 918.5 L91 990 Q91 998 99 998 L107 998 Q115 998 115 1006 L115 1030.5" dur="7.673s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.6321;0.6993;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.6125;0.6321;0.7306;0.7501;1" dur="7.673s" repeatCount="indefinite" />
        </circle>
        <path d="M133 1083 L133 1090.5 Q133 1098 125.5 1098 L80 1098 Q72 1098 72 1106 L72 1131.13" fill="none" stroke="#60a5fa" strokeOpacity="0.6" strokeWidth="2.4" pathLength="1" strokeDasharray="0.24 2" strokeDashoffset="0.24" opacity="0">
          <animate attributeName="stroke-dashoffset" values="0.24;0.24;-0.76;-1;-1" keyTimes="0;0.7306;0.7827;0.7951;1" calcMode="spline" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1;0 0 1 1" dur="7.673s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.7306;0.7319;0.7951;0.7964;1" dur="7.673s" repeatCount="indefinite" />
        </path>
        <circle r="2.5" fill="#60a5fa" opacity="0">
          <animateMotion path="M133 1083 L133 1090.5 Q133 1098 125.5 1098 L80 1098 Q72 1098 72 1106 L72 1131.13" dur="7.673s" repeatCount="indefinite" calcMode="spline" keyPoints="0;0;1;1" keyTimes="0;0.7306;0.7827;1" keySplines="0 0 1 1;0.65 0 0.35 1;0 0 1 1" />
          <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.711;0.7306;0.7827;0.8023;1" dur="7.673s" repeatCount="indefinite" />
        </circle>
      </g>
    </svg>
  );
}
