{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gateway-svg-illustration",
  "type": "registry:ui",
  "description": "SVG illustration for gateway overhead",
  "files": [
    {
      "path": "registry/default/ui/gateway-svg-illustration.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype GatewayOverheadIds = {\n  base: string\n  left: string\n  right: string\n  bottom: string\n  clip: string\n  logoClip: string\n  top: string[]\n}\n\nexport interface GatewayOverheadProps\n  extends React.SVGAttributes<SVGSVGElement> {\n  width?: number\n  height?: number\n  backgroundColor?: string\n  borderColor?: string\n  leftLineColor?: string\n  centerLineColor?: string\n  rightLineColor?: string\n  logoColor?: string\n  iconColor?: string\n  showBackgroundGrid?: boolean\n  leftIcon?: React.ReactNode\n  centerIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n}\n\ntype GatewayOverheadDefsProps = {\n  ids: GatewayOverheadIds\n  borderColor: string\n  backgroundColor: string\n}\n\ntype GatewayOverheadGridProps = {\n  ids: GatewayOverheadIds\n  borderColor: string\n}\n\nfunction buildGatewayOverheadIds(id: string): GatewayOverheadIds {\n  const base = id.replaceAll(\":\", \"\")\n  return {\n    base,\n    left: `${base}-left`,\n    right: `${base}-right`,\n    bottom: `${base}-bottom`,\n    clip: `${base}-clip`,\n    logoClip: `${base}-logo-clip`,\n    top: Array.from({ length: 7 }, (_, index) => `${base}-top-${index}`),\n  }\n}\n\nfunction GatewayOverheadSvg({\n  className,\n  width = 264,\n  height = 120,\n  ...props\n}: React.ComponentProps<\"svg\">) {\n  return (\n    <svg\n      className={cn(className)}\n      data-slot=\"gateway-overhead\"\n      fill=\"none\"\n      height={height}\n      viewBox=\"0 0 264 120\"\n      width={width}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    />\n  )\n}\n\nfunction GatewayOverheadDefs({\n  ids,\n  borderColor,\n  backgroundColor,\n}: GatewayOverheadDefsProps) {\n  return (\n    <defs data-slot=\"gateway-overhead-defs\">\n      <linearGradient\n        gradientUnits=\"userSpaceOnUse\"\n        id={ids.left}\n        x1=\"22\"\n        x2=\"-10\"\n        y1=\"32\"\n        y2=\"32\"\n      >\n        <stop stopColor={borderColor} />\n        <stop offset=\"1\" stopColor={borderColor} stopOpacity=\"0\" />\n      </linearGradient>\n      <linearGradient\n        gradientUnits=\"userSpaceOnUse\"\n        id={ids.right}\n        x1=\"32\"\n        x2=\"0\"\n        y1=\"16\"\n        y2=\"16\"\n      >\n        <stop stopColor={borderColor} />\n        <stop offset=\"1\" stopColor={borderColor} stopOpacity=\"0\" />\n      </linearGradient>\n      <linearGradient\n        gradientUnits=\"userSpaceOnUse\"\n        id={ids.bottom}\n        x1=\"132.5\"\n        x2=\"132.5\"\n        y1=\"104.5\"\n        y2=\"120\"\n      >\n        <stop stopColor=\"#C9C9C9\" />\n        <stop offset=\"1\" stopColor={backgroundColor} />\n      </linearGradient>\n      {ids.top.map((topId, index) => (\n        <linearGradient\n          gradientUnits=\"userSpaceOnUse\"\n          id={topId}\n          key={topId}\n          x1={138 + index * 42 - 106}\n          x2={106 + index * 42 - 106}\n          y1=\"-8\"\n          y2=\"-8\"\n        >\n          <stop stopColor={borderColor} />\n          <stop offset=\"1\" stopColor={borderColor} stopOpacity=\"0\" />\n        </linearGradient>\n      ))}\n      <clipPath id={ids.clip}>\n        <rect fill=\"white\" height=\"120\" width=\"264\" />\n      </clipPath>\n      <clipPath id={ids.logoClip}>\n        <rect\n          fill=\"white\"\n          height=\"14.4\"\n          transform=\"translate(124.8 79.9004)\"\n          width=\"14.4\"\n        />\n      </clipPath>\n    </defs>\n  )\n}\n\nfunction GatewayOverheadScene({\n  ids,\n  children,\n}: React.PropsWithChildren<{ ids: GatewayOverheadIds }>) {\n  return (\n    <g clipPath={`url(#${ids.clip})`} data-slot=\"gateway-overhead-scene\">\n      {children}\n    </g>\n  )\n}\n\nfunction GatewayOverheadBackground({\n  backgroundColor,\n}: {\n  backgroundColor: string\n}) {\n  return (\n    <rect\n      data-slot=\"gateway-overhead-background\"\n      fill={backgroundColor}\n      height=\"120\"\n      width=\"264\"\n    />\n  )\n}\n\nfunction GatewayOverheadBackgroundGrid({\n  ids,\n  borderColor,\n}: GatewayOverheadGridProps) {\n  return (\n    <g data-slot=\"gateway-overhead-grid\" opacity=\"0.8\">\n      <rect\n        fill=\"none\"\n        height=\"32\"\n        opacity=\"0.5\"\n        rx=\"6\"\n        stroke={`url(#${ids.left})`}\n        width=\"32\"\n        x=\"-10\"\n        y=\"16\"\n      />\n      <rect\n        fill=\"none\"\n        height=\"32\"\n        opacity=\"0.5\"\n        rx=\"6\"\n        stroke={borderColor}\n        width=\"32\"\n        x=\"74\"\n        y=\"16\"\n      />\n      <rect\n        fill=\"none\"\n        height=\"32\"\n        opacity=\"0.5\"\n        rx=\"6\"\n        stroke={borderColor}\n        width=\"32\"\n        x=\"158\"\n        y=\"16\"\n      />\n      <rect\n        fill=\"none\"\n        height=\"32\"\n        opacity=\"0.5\"\n        rx=\"6\"\n        stroke={`url(#${ids.top[0]})`}\n        transform=\"rotate(90 106 -24)\"\n        width=\"32\"\n        x=\"106\"\n        y=\"-24\"\n      />\n      <rect\n        fill=\"none\"\n        height=\"32\"\n        opacity=\"0.5\"\n        rx=\"6\"\n        stroke={`url(#${ids.top[1]})`}\n        transform=\"rotate(90 64 -24)\"\n        width=\"32\"\n        x=\"64\"\n        y=\"-24\"\n      />\n      <rect\n        fill=\"none\"\n        height=\"32\"\n        opacity=\"0.5\"\n        rx=\"6\"\n        stroke={`url(#${ids.top[2]})`}\n        transform=\"rotate(90 22 -24)\"\n        width=\"32\"\n        x=\"22\"\n        y=\"-24\"\n      />\n      <rect\n        fill=\"none\"\n        height=\"32\"\n        opacity=\"0.5\"\n        rx=\"6\"\n        stroke={`url(#${ids.top[3]})`}\n        transform=\"rotate(90 148 -24)\"\n        width=\"32\"\n        x=\"148\"\n        y=\"-24\"\n      />\n      <rect\n        fill=\"none\"\n        height=\"32\"\n        opacity=\"0.5\"\n        rx=\"6\"\n        stroke={`url(#${ids.top[4]})`}\n        transform=\"rotate(90 190 -24)\"\n        width=\"32\"\n        x=\"190\"\n        y=\"-24\"\n      />\n      <rect\n        fill=\"none\"\n        height=\"32\"\n        opacity=\"0.5\"\n        rx=\"6\"\n        stroke={`url(#${ids.top[5]})`}\n        transform=\"rotate(90 232 -24)\"\n        width=\"32\"\n        x=\"232\"\n        y=\"-24\"\n      />\n      <rect\n        fill=\"none\"\n        height=\"32\"\n        opacity=\"0.5\"\n        rx=\"6\"\n        stroke={`url(#${ids.top[6]})`}\n        transform=\"rotate(90 274 -24)\"\n        width=\"32\"\n        x=\"274\"\n        y=\"-24\"\n      />\n      <rect\n        fill=\"none\"\n        height=\"32\"\n        opacity=\"0.5\"\n        rx=\"6\"\n        stroke={`url(#${ids.right})`}\n        transform=\"matrix(-1 0 0 1 274 16)\"\n        width=\"32\"\n      />\n    </g>\n  )\n}\n\nfunction GatewayOverheadBottomLine({ ids }: { ids: GatewayOverheadIds }) {\n  return (\n    <path\n      d=\"M132 100V120\"\n      data-slot=\"gateway-overhead-bottom-line\"\n      stroke={`url(#${ids.bottom})`}\n    />\n  )\n}\n\nfunction GatewayOverheadNodeBox({\n  x,\n  borderColor,\n}: {\n  x: number\n  borderColor: string\n}) {\n  return (\n    <rect\n      data-slot=\"gateway-overhead-node-box\"\n      fill=\"white\"\n      height=\"32\"\n      rx=\"6\"\n      stroke={borderColor}\n      width=\"32\"\n      x={x}\n      y=\"16\"\n    />\n  )\n}\n\nfunction GatewayOverheadCenterIcon({ iconColor }: { iconColor: string }) {\n  return (\n    <path\n      d=\"M127.051 27.0498C128.859 25.242 131.41 24.6311 133.721 25.2149L132.866 26.3789C131.137 26.114 129.31 26.647 127.978 27.9785C125.757 30.1996 125.757 33.8004 127.978 36.0215L128.442 36.4854L127.515 37.4141L127.051 36.9502C124.317 34.2165 124.317 29.7835 127.051 27.0498ZM137.953 28.3194C139.625 31.0188 139.293 34.6077 136.95 36.9502L136.485 37.4141L135.558 36.4854L136.021 36.0215C137.791 34.2523 138.149 31.6089 137.1 29.4834L137.953 28.3194ZM135.725 26.0742C136.097 26.3086 136.445 26.5769 136.766 26.875L133.731 30.667C134.016 31.0363 134.187 31.4976 134.187 32C134.187 33.2081 133.208 34.1875 132 34.1875C130.792 34.1875 129.812 33.2081 129.812 32C129.812 30.7919 130.792 29.8125 132 29.8125C132.228 29.8125 132.447 29.8476 132.653 29.9121L135.725 26.0742ZM132 31.125C131.517 31.125 131.125 31.5168 131.125 32C131.125 32.4833 131.517 32.875 132 32.875C132.483 32.875 132.875 32.4833 132.875 32C132.875 31.5168 132.483 31.125 132 31.125Z\"\n      data-slot=\"gateway-overhead-center-icon\"\n      fill={iconColor}\n    />\n  )\n}\n\nfunction GatewayOverheadCenterLine({\n  centerLineColor,\n}: {\n  centerLineColor: string\n}) {\n  return (\n    <path\n      d=\"M132 48.5L132 75\"\n      data-slot=\"gateway-overhead-center-line\"\n      stroke={centerLineColor}\n    />\n  )\n}\n\nfunction GatewayOverheadRightLine({\n  rightLineColor,\n}: {\n  rightLineColor: string\n}) {\n  return (\n    <path\n      d=\"M217.5 50.4355C217.5 55.7802 211.871 60.1133 204.927 60.1133H144.073C137.685 60.1133 132.506 64.0995 132.506 69.0166V72.5H131.5V69.0166C131.5 63.6719 137.129 59.3389 144.073 59.3389H204.927C211.315 59.3389 216.494 55.3526 216.494 50.4355V48.5H217.5V50.4355Z\"\n      data-slot=\"gateway-overhead-right-line\"\n      fill={rightLineColor}\n    />\n  )\n}\n\nfunction GatewayOverheadLeftLine({ leftLineColor }: { leftLineColor: string }) {\n  return (\n    <path\n      d=\"M48 49V49C48 55.1998 53.026 60.2258 59.2258 60.2258H120C126.627 60.2258 132 65.5984 132 72.2258V73\"\n      data-slot=\"gateway-overhead-left-line\"\n      fill=\"none\"\n      stroke={leftLineColor}\n    />\n  )\n}\n\nfunction GatewayOverheadHub({\n  ids,\n  backgroundColor,\n  logoColor,\n}: {\n  ids: GatewayOverheadIds\n  backgroundColor: string\n  logoColor: string\n}) {\n  return (\n    <g data-slot=\"gateway-overhead-hub\">\n      <circle cx=\"132\" cy=\"88\" fill={backgroundColor} r=\"18\" stroke=\"#C9C9C9\" />\n      <g clipPath={`url(#${ids.logoClip})`}>\n        <path\n          clipRule=\"evenodd\"\n          d=\"M132 80.8008L139.2 93.4008H124.8L132 80.8008Z\"\n          fill={logoColor}\n          fillRule=\"evenodd\"\n        />\n      </g>\n    </g>\n  )\n}\n\nfunction GatewayOverhead({\n  width = 264,\n  height = 120,\n  //   backgroundColor = \"#FAFAFA\",\n  backgroundColor = \"transparent\",\n  borderColor = \"#EAEAEA\",\n  leftLineColor = \"#0067D6\",\n  centerLineColor = \"#FFB224\",\n  rightLineColor = \"#CA2A30\",\n  logoColor = \"#000000\",\n  iconColor = \"#171717\",\n  showBackgroundGrid = true,\n  leftIcon,\n  centerIcon,\n  rightIcon,\n  className,\n  ...props\n}: GatewayOverheadProps) {\n  const ids = buildGatewayOverheadIds(React.useId())\n\n  return (\n    <GatewayOverheadSvg\n      className={className}\n      height={height}\n      width={width}\n      {...props}\n    >\n      <title>Gateway Overhead</title>\n      <GatewayOverheadDefs\n        backgroundColor={backgroundColor}\n        borderColor={borderColor}\n        ids={ids}\n      />\n      <GatewayOverheadScene ids={ids}>\n        <GatewayOverheadBackground backgroundColor={backgroundColor} />\n        {showBackgroundGrid ? (\n          <GatewayOverheadBackgroundGrid borderColor={borderColor} ids={ids} />\n        ) : null}\n\n        <GatewayOverheadBottomLine ids={ids} />\n\n        <GatewayOverheadNodeBox borderColor={borderColor} x={32} />\n        {leftIcon ?? (\n          <g\n            data-slot=\"gateway-overhead-left-icon\"\n            transform=\"translate(41, 25)\"\n          >\n            <SettingsIcon color={iconColor} />\n          </g>\n        )}\n\n        <GatewayOverheadNodeBox borderColor={borderColor} x={116} />\n        {centerIcon ?? <GatewayOverheadCenterIcon iconColor={iconColor} />}\n\n        <GatewayOverheadNodeBox borderColor={borderColor} x={200} />\n        {rightIcon ?? (\n          <g\n            data-slot=\"gateway-overhead-right-icon\"\n            transform=\"translate(209, 25)\"\n          >\n            <SettingsIcon color={iconColor} />\n          </g>\n        )}\n\n        <GatewayOverheadCenterLine centerLineColor={centerLineColor} />\n        <GatewayOverheadRightLine rightLineColor={rightLineColor} />\n        <GatewayOverheadLeftLine leftLineColor={leftLineColor} />\n\n        <GatewayOverheadHub\n          backgroundColor={backgroundColor}\n          ids={ids}\n          logoColor={logoColor}\n        />\n      </GatewayOverheadScene>\n    </GatewayOverheadSvg>\n  )\n}\n\nfunction SettingsIcon({ color = \"#171717\" }: { color?: string }) {\n  const k = 14 / 24\n  return (\n    <g data-slot=\"gateway-overhead-settings-icon\" transform={`scale(${k})`}>\n      <path\n        d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"\n        fill={color}\n      />\n      <circle cx=\"12\" cy=\"12\" fill={color} r=\"3\" />\n    </g>\n  )\n}\n\nexport {\n  GatewayOverhead,\n  GatewayOverheadSvg,\n  GatewayOverheadDefs,\n  GatewayOverheadScene,\n  GatewayOverheadBackground,\n  GatewayOverheadBackgroundGrid,\n  GatewayOverheadBottomLine,\n  GatewayOverheadNodeBox,\n  GatewayOverheadCenterIcon,\n  GatewayOverheadCenterLine,\n  GatewayOverheadRightLine,\n  GatewayOverheadLeftLine,\n  GatewayOverheadHub,\n}\n\nexport default GatewayOverhead\n",
      "type": "registry:ui"
    }
  ]
}